UI 组件
基于代码的 UI 组件生成与样式实现
1k-architecture
OneKeyHQ
OneKey monorepo architecture, project structure, package relationships, and import hierarchy rules.
obsidian-markdown
kepano
Create and edit Obsidian Flavored Markdown with wikilinks, embeds, callouts, properties, and other Obsidian-specific syntax. Use when working with .md files in Obsidian, or when the user mentions wikilinks, callouts, frontmatter, tags, embeds, or Obsidian notes.
app-coding-standards
Expensify
Provides coding standards for the Expensify App's React Native code, including performance patterns, consistency rules, and clean React architecture. Use when writing, modifying, or reviewing App code.
onyx
Expensify
Onyx state management patterns — useOnyx hook, action files, optimistic updates, collections, and offline-first architecture. Use when working with Onyx connections, writing action files, debugging state, or implementing API calls with optimistic data.
web-design
xiaopu-ai
Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。
using-elixir-skills
georgeguimaraes
This skill should be used when the user works on any .ex or .exs file, mentions Elixir/Phoenix/Ecto/OTP, the project has a mix.exs, or asks "which skill should I use", "new to Elixir", "help with Elixir". Routes to the correct thinking skill BEFORE exploring code. Triggers on "implement", "add", "fix", "refactor" in Elixir projects.
openspec-onboard
rivet-dev
Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.
openspec-explore
rivet-dev
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
openspec-explore
rivet-dev
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
improve-codebase-architecture
windmill-labs
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
raw-app
windmill-labs
MUST use when creating raw apps.
refactor
AccessLint
Accessibility refactoring specialist. Automatically fixes accessibility issues across multiple files. Performs complex refactoring like extracting accessible components, restructuring markup, and implementing proper ARIA patterns.
shadcn-ui
google-labs-code
Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.
homeassistant-dashboard-designer
CCOSTAN
"Design, update, and refactor Home Assistant Lovelace dashboards (YAML views/partials) with a constrained, machine-safe design system: button-card-first structure, minimal card-mod styling, optional flex-horseshoe + mini-graph telemetry, strict grid/vertical-stack layout rules, centralized templates, deterministic ordering, and config validation. Use for Home Assistant dashboard work (especially config/dashboards/**), when refactoring views, adding infra/home/energy/environment panels, or translating Stitch design inspiration into safe Lovelace YAML."
svelte-frontend
windmill-labs
Svelte coding guidelines for the Windmill frontend. MUST use when writing or modifying code in the frontend directory.
hyperframes-registry
Sma1lboy
"Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR)."
remotion-best-practices
Sma1lboy
Best practices for Remotion - Video creation in React
better-stimulus
obie
Apply Better Stimulus best practices for writing maintainable, reusable StimulusJS controllers following SOLID principles
svelte-template-directives
spences10
Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.
svelte-components
spences10
Svelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.
code-simplification
sammcj
Use this skill when you need to review and refactor code to make it simpler, more maintainable, and easier to understand. Helps with identifying overly complex solutions, unnecessary abstractions.
writing-go-tests
sammcj
Applies current Go testing best practices. Use when writing or modifying Go test files or advising on Go testing strategies.
analyse-design
sammcj
Reverse-engineer an application's design system from its codebase and screenshots. Use when asked to analyse visual design, extract a colour palette, document UI patterns, identify typography and spacing systems, audit design consistency, or understand the design language of a frontend codebase.
implementing-figma-designs
OneKeyHQ
Implements Figma designs 1:1 using OneKey component library (还原设计稿).