UI Components
Code-based UI component generation and styling
react-pdf
by trailofbits
"Generates PDF documents using the React-PDF library (@react-pdf/renderer) with TypeScript and JSX.
status-quo-bias
by flpbalada
Understand and design for users' preference for current state over change. Use
visual-cues-cta-psychology
by flpbalada
Design effective CTAs using visual attention and gaze psychology principles.
cognitive-biases
by flpbalada
Apply cognitive bias knowledge to product design and decision-making. Use when
nextjs-image-art-direction
by flpbalada
Implement art direction for Next.js images using getImageProps(). Use when
code-architecture-tailwind-v4-best-practices
by flpbalada
Guides Tailwind CSS v4 patterns for buttons and components. Use this skill when creating components with variants, choosing between CVA/tailwind-variants, or configuring Tailwind v4's CSS-first approach.
react-useeffect-avoid
by flpbalada
Guides when NOT to use useEffect and suggests better alternatives. Use when reviewing React code, troubleshooting performance, or considering useEffect for derived state or form resets.
halo-effect-psychology
by flpbalada
Apply the halo effect in product design and UX. Use when designing first
code-architecture-wrong-abstraction
by flpbalada
Guides when to abstract vs duplicate code. Use this skill when creating shared utilities, deciding between DRY/WET approaches, or refactoring existing abstractions.
loss-aversion-psychology
by flpbalada
Leverage loss aversion in product design and messaging. Use when designing
react-use-callback
by flpbalada
Guides proper usage of the useCallback hook in React. Use this skill when optimizing function references, passing callbacks to memoized components, or preventing unnecessary re-renders.
fogg-behavior-model
by flpbalada
Design behavior change using the B=MAP framework. Use when designing
project-structure
by flpbalada
Guides React/Next.js/TypeScript project organization using feature-based architecture. Use when structuring new projects, reorganizing codebases, or deciding where to place new code.
react-use-client-boundary
by flpbalada
Guides proper usage of "use client" directive in React/Next.js. Use this skill
cognitive-load
by flpbalada
Design experiences that optimize mental resources using Cognitive Load Theory.
self-initiated-triggers
by flpbalada
Design internal triggers for sustained user engagement. Use when building
react-use-state
by flpbalada
Guides proper usage of React useState hook. Use this skill when adding state to components, deciding between useState vs alternatives, or troubleshooting state update issues.
css-container-queries
by flpbalada
Apply CSS container queries for component-based responsive design. Use when implementing responsive components that adapt to their container size rather than viewport size.
react-key-prop
by flpbalada
Guides proper usage of the key prop in React lists. Use this skill when rendering lists, mapping arrays to components, or troubleshooting list-related state bugs.
mermaid-diagrams
by hoodini
Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.
market-sizing
by z1993
市场规模测算工具 (TAM/SAM/SOM)。适用于用户提到「市场规模」「market size」「TAM」「SAM」「SOM」或需要估算目标市场大小时使用。
figma
by hoodini
Integrate with Figma API for design automation and code generation. Use when extracting design tokens, generating React/CSS code from Figma components, syncing design systems, building Figma plugins, or automating design-to-code workflows. Triggers on Figma API, design tokens, Figma plugin, design-to-code, Figma export, Figma component, Dev Mode.
ux-design-systems
by hoodini
Build consistent design systems with tokens, components, and theming. Use when creating component libraries, implementing design tokens, building theme systems, or ensuring design consistency. Triggers on design system, design tokens, component library, theming, dark mode.
web-accessibility
by hoodini
Build accessible web applications following WCAG guidelines. Use when implementing ARIA patterns, keyboard navigation, screen reader support, or ensuring accessibility compliance. Triggers on accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation.