UI 组件
基于代码的 UI 组件生成与样式实现
react-pdf
trailofbits
"Generates PDF documents using the React-PDF library (@react-pdf/renderer) with TypeScript and JSX.
status-quo-bias
flpbalada
Understand and design for users' preference for current state over change. Use
visual-cues-cta-psychology
flpbalada
Design effective CTAs using visual attention and gaze psychology principles.
cognitive-biases
flpbalada
Apply cognitive bias knowledge to product design and decision-making. Use when
nextjs-image-art-direction
flpbalada
Implement art direction for Next.js images using getImageProps(). Use when
code-architecture-tailwind-v4-best-practices
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
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
flpbalada
Apply the halo effect in product design and UX. Use when designing first
code-architecture-wrong-abstraction
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
flpbalada
Leverage loss aversion in product design and messaging. Use when designing
react-use-callback
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
flpbalada
Design behavior change using the B=MAP framework. Use when designing
project-structure
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
flpbalada
Guides proper usage of "use client" directive in React/Next.js. Use this skill
cognitive-load
flpbalada
Design experiences that optimize mental resources using Cognitive Load Theory.
self-initiated-triggers
flpbalada
Design internal triggers for sustained user engagement. Use when building
react-use-state
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
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
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
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
z1993
市场规模测算工具 (TAM/SAM/SOM)。适用于用户提到「市场规模」「market size」「TAM」「SAM」「SOM」或需要估算目标市场大小时使用。
figma
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
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
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.