frontend
3
developing-reactflow-ui
React Flow 라이브러리를 사용한 노드 기반 UI 개발 지원. 노드/엣지 생성, 커스터마이징, 레이아웃, 상호작용 구현 시 사용. 항상 최신 문서를 WebFetch로 참조하여 정확한 정보 제공.
jeongsk
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
3
javascript
Write modern JavaScript/ES6+ code following best practices for performance, security, and maintainability. Use when writing JS code, fixing bugs, or implementing frontend functionality.
vapvarun
development
frontend
3
ui-ux-designer
Modern UI/UX design specialist for web applications, mobile apps, and design systems. Covers design principles, user research, interaction patterns, accessibility (WCAG), responsive design, component libraries (Tailwind, shadcn/ui, Material), prototyping, and usability testing. Creates beautiful, functional interfaces following best practices.
hummbl-dev
development
frontend
3
css-styling
Write modern, maintainable CSS using best practices for layouts, responsive design, animations, and CSS architecture. Use when styling websites, fixing CSS issues, or implementing designs.
vapvarun
development
frontend
3
focus-states
Generates accessible focus indicators meeting WCAG 2.4.7 and 2.4.11 requirements. Use when styling :focus-visible, keyboard navigation indicators, or fixing focus ring visibility issues.
dylantarre
development
frontend
3
responsive-typography
Implements fluid typography using CSS clamp() that scales with viewport. Use when creating responsive font sizes, viewport-aware headings, or type that adapts smoothly without breakpoints.
dylantarre
development
frontend
3
aria-patterns
Provides ARIA roles, states, and properties for interactive components. Use when building custom widgets, fixing screen reader issues, or implementing modals, tabs, accordions, menus, or dialogs accessibly.
dylantarre
development
frontend
3
form-vanilla
Framework-free form validation using HTML5 Constraint Validation API enhanced with Zod for complex rules. Use when building forms without React/Vue or for progressive enhancement.
Bbeierle12
development
frontend
3
applying-frontend-patterns
Framework-agnostic frontend component design patterns. Use when designing React/Vue/Angular components, applying Container/Presentational pattern, or when user mentions component patterns, フロントエンドパターン, コンポーネント設計.
thkt
development
frontend
3
postfx-bloom
Bloom and glow effects using Three.js UnrealBloomPass with React Three Fiber. Use when implementing glow, bloom, luminance-based effects, selective bloom on specific meshes, or neon/ethereal lighting. Essential for cyberpunk aesthetics, energy effects, magic spells, and UI glow.
Bbeierle12
development
frontend
3
react-component
Create React components with TypeScript, following best practices for hooks, state management, accessibility, and testing. Use when building new UI components or refactoring existing ones.
vapvarun
development
frontend
3
optimizing-performance
Frontend performance optimization with data-driven approach. Triggers: performance, Web Vitals, LCP, FID, CLS, パフォーマンス最適化, 速度改善, bundle size.
thkt
development
frontend
3
storybook
Use Storybook to document UI states and design decisions as portable artifacts (stories + MDX docs) that engineers and QA can review. Use when: (1) exploring a component library interactively, (2) capturing canonical UI states for design guidance, (3) providing evidence and references in Beads task comments. This skill is tool-focused and does not assume Storybook is installed in the repo.
lambda-curry
development
frontend
3
motion-scale
Generates animation duration, easing curves, and delay tokens with prefers-reduced-motion support. Use when creating transition timing, animation speed, or motion systems. Outputs CSS, Tailwind, or JSON.
dylantarre
development
frontend
3
policyengine-app
PolicyEngine React web application - the user interface at policyengine.org
PolicyEngine
development
frontend
3
component-development
When you are creating or modifying UI components. Use this skill to ensure consistency with the design system and shadcn/ui.
nextblock-cms
development
frontend
3
enhancing-progressively
CSS-first approach - use CSS before JavaScript. Triggers: レイアウト, スタイル, 位置, アニメーション, 表示/非表示, トグル, レスポンシブ, CSS Grid, Flexbox, transforms, transitions, CSSのみ, JavaScript不要, シンプル
thkt
development
frontend
3
gsap-fundamentals
Core GSAP animation concepts including tweens, timelines, easing functions, and animation properties. Use when implementing basic animations, transitions, or learning GSAP foundations. Essential starting point for any GSAP-based animation work.
Bbeierle12
development
frontend
3
r3f-fundamentals
React Three Fiber core setup, Canvas configuration, scene hierarchy, camera systems, lighting, render loop, and React integration patterns. Use when setting up a new R3F project, configuring the Canvas component, managing scene structure, or understanding the declarative Three.js-in-React paradigm. The foundational skill that all other R3F skills depend on.
Bbeierle12
development
frontend
3
nuqs-setup
Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation.
andrelandgraf
development
frontend
3
gsap-react
GSAP integration with React including useGSAP hook, ref handling, cleanup patterns, and context management. Use when implementing GSAP animations in React components, handling component lifecycle, or building reusable animation hooks.
Bbeierle12
development
frontend
3
react-patterns
React best practices and anti-patterns reference. Use when writing React components, reviewing code for anti-patterns, debugging useEffect issues, optimizing performance, or deciding between state vs derived values. Covers Effects, state design, component patterns, performance, and event handling.
iamhenry
development