UI Components
Code-based UI component generation and styling
vercel-react-best-practices
by calcom
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
learning-opportunities
by DrCatHicks
Facilitates deliberate skill development during AI-assisted coding. Offers interactive learning exercises after architectural work (new files, schema changes, refactors). Use when completing features, making design decisions, or when user asks to understand code better. Supports the user's stated goal of understanding design choices as learning opportunities.
testing-standards
by DaveSkender
Testing conventions for Stock Indicators. Use for test naming (MethodName_StateUnderTest_ExpectedBehavior), FluentAssertions patterns, precision requirements, and test base class selection.
biome-developer
by biomejs
General development best practices and common gotchas when working on Biome. Use for avoiding common mistakes, understanding Biome-specific patterns, and learning technical tips. Examples:<example>Working with Biome's AST and syntax nodes</example><example>Understanding string extraction methods</example><example>Handling embedded languages and directives</example>
parser-development
by biomejs
Guide for implementing parsers with error recovery for new languages in Biome. Use when creating parsers for JavaScript, CSS, JSON, HTML, GraphQL, or adding new language support. Examples:<example>User needs to add parsing support for a new language</example><example>User wants to implement error recovery in parser</example><example>User is writing grammar definitions in .ungram format</example>
write-tests
by elie222
Write focused unit tests for backend and utility logic
ui-components
by elie222
UI component and styling guidelines using Shadcn UI, Radix UI, and Tailwind
1k-architecture
by OneKeyHQ
OneKey monorepo architecture, project structure, package relationships, and import hierarchy rules.
1k-coding-patterns
by OneKeyHQ
Coding patterns and best practices — React components, promise handling, and TypeScript conventions.
1k-ui-recipes
by OneKeyHQ
UI recipes for scroll offset (useScrollContentTabBarOffset), view transitions (startViewTransition), horizontal scroll in collapsible tab headers (CollapsibleTabContext), and Android bottom tab touch interception workaround.
implementing-figma-designs
by OneKeyHQ
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
react-best-practices
by OneKeyHQ
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
tooluniverse-clinical-trial-design
by mims-harvard
Strategic clinical trial design feasibility assessment using ToolUniverse. Evaluates patient population sizing, biomarker prevalence, endpoint selection, comparator analysis, safety monitoring, and regulatory pathways. Creates comprehensive feasibility reports with evidence grading, enrollment projections, and trial design recommendations. Use when planning Phase 1/2 trials, assessing trial feasibility, or designing biomarker-driven studies.
ux-ui-analyze-single-page
by raphaelmansuy
Analyze exactly one captured UI page (from ux_ui_map screenshots + request JSON) and immediately write/update ux_ui_map/pages/{page}.md in neutral descriptive language. Use when asked to analyze screenshots, rewrite corresponding analysis immediately, or avoid memory/context saturation.
ux-ui-map-page-by-page
by raphaelmansuy
Produce the EdgeQuake WebUI UX/UI map one route at a time (capture screenshots, then immediately write per-page docs and per-page analysis requests). Use when asked to map UI, capture screens page-by-page, avoid agent memory saturation, or generate ux_ui_map artifacts.
reverse-documentation
by raphaelmansuy
Automatically generate comprehensive documentation for Rust and TypeScript codebases by analyzing code structure, patterns, and relationships. Supports trait-based patterns, async operations, React components, and Next.js applications.
copilotkit-nextjs-integration
by raphaelmansuy
Integrate CopilotKit AI components into Next.js frontend for building agentic UIs. Enables context-aware AI agents that can read app state and trigger tools/actions. Supports custom adapters for self-hosted LLMs and multiple provider integrations.
chatgpt-app-builder
by alpic-ai
Guide developers through creating ChatGPT apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/widgets, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to create or update a ChatGPT app / MCP server for ChatGPT, or use the Skybridge framework.
mcp-app-builder
by alpic-ai
Guide developers through creating MCP apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/widgets, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to create or update a MCP app, MCP server or use the Skybridge framework.
skybridge
by alpic-ai
Guide developers through creating ChatGPT and MCP apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/widgets, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to create or update a ChatGPT app, MCP app, MCP server or use the Skybridge framework.
docs-style
by continuedev
Style guidelines for writing and updating documentation. Use when writing new docs, updating existing docs, or reviewing docs for quality.
fastgpt-design-skill
by labring
当用户需要设计 FastGPT 的代码时，可调用此 Skill。
openspec-onboard
by rivet-dev
Guided onboarding for OpenSpec - walk through a complete workflow cycle with narration and real codebase work.
openspec-explore
by 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.