building-components
This skill provides a structured guide for building, documenting, and distributing modern, accessible, and composable UI components.
Is building-components safe to install?
Safe to install: our audit of building-components's source files found 0 shell commands, 0 external URLs, file reads and writes (low risk). Every command and URL listed appears verbatim in the skill's source. The skill reads local reference files to provide guidance but does not execute commands or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building UI components, design systems, or component libraries.
What can you do with it?
- Building UI primitives, components, blocks, and templates
- Implementing accessibility features including ARIA and focus management
- Designing composable component APIs
- Setting up design tokens and theming systems
- Publishing components to npm or registries
- Writing component documentation
How good is this skill?
Quality score: 5/10. The skill provides a clear, well-organized set of references for component development. It lacks automated tool execution, which limits its utility to guidance rather than direct implementation.
What does the skill file contain?
# Building Components ## When to use this skill Use when the user is: - Building new UI components (primitives, components, blocks, templates) - Implementing accessibility features (ARIA, keyboard navigation, focus management) - Creating composable component APIs (slots, render props, controlled/uncontrolled state) - Setting up design tokens and theming systems - Publishing components to npm or a registry - Writing component documentation - Implementing polymorphism or as-child patterns - Working with data attributes for styling/state ## References - [definitions.mdx](./references/definit...
Frequently asked questions
What types of components does this skill cover?
It covers primitives, components, blocks, and templates as defined in the internal taxonomy.
Does this skill help with accessibility?
Yes, it provides guidance on ARIA, keyboard navigation, and WCAG compliance.
Can this skill help with publishing components?
Yes, it includes references for publishing to npm and shadcn-style registries.
Related skills
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
emil-design-eng
114.3KDevelopers and designers building user interfaces who want to improve the feel and responsiveness of their software
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.
audit-website
58.0KDevelopers, SEO specialists, and website administrators who need to automate website health monitoring, technical debugging, and performance optimization
The audit-website skill enables AI agents to perform comprehensive website audits using the squirrelscan CLI. It evaluates websites against 240+ rules across 22 categories, including SEO, performance, security, and accessibility. The skill generates LLM-optimized reports, identifies issues, and provides actionable recommendations for remediation.
developing-genkit-js
50.1KDevelopers building AI agents, flows, and tools using the Genkit framework in JavaScript or TypeScript environments
This skill provides guidance for developing AI-powered applications using Genkit in Node.js and TypeScript. It enforces a strict troubleshooting protocol that prioritizes reading local documentation via the Genkit CLI over internal knowledge to account for recent breaking API changes.