Building Components

by pedronauck · documents · typescript, api, documentation, skill

Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

Source: https://github.com/pedronauck/skills

Install

git clone https://github.com/pedronauck/skills

Tags: typescript, api, documentation, skill

⭐ 394 GitHub stars · Source: skillsdirectory

About documents MCP servers and Claude skills

documents MCP servers extend what AI agents can do inside Claude Code, Cursor, Copilot, Codex, and Windsurf. The Skiln directory indexes 16,000+ such integrations across 22 categories.

Building Components is one of hundreds of documents entries indexed on Skiln. Browse the full documents category or the complete directory of Claude skills, MCP servers, agents, commands, and hooks.

Related documents MCPs and skills

  • Audit Docs Delegation by melodic-software

    Audit skills and memory files for docs-management delegation compliance. Detects hardcoded Claude Code data and verifies proper delegation patterns.

  • Lint Md by melodic-software

    Run markdown linting validation on files using markdownlint-cli2

  • Nullable Audit by melodic-software

    Analyze nullable reference type adoption with warnings breakdown and migration recommendations

  • Specify by melodic-software

    Create formal specification for a component or behavior using TLA+, SysML, or state machines. Use for safety-critical systems.

  • Improving Drf Endpoints by PostHog

    Use when editing, reviewing, or auditing DRF viewsets and serializers in PostHog. Triggers on files in posthog/api/, products/*/backend/api/, products/*/backend/presentation/, or any file importing rest_framework. Covers field typing, schema annotations, enum collision fixes, and OpenAPI spec quality — everything that flows downstream into generated TypeScript types and MCP tools.

  • Br Write Schema by Lonsdale201

    Validate POST / PUT / PATCH bodies on a better-route

  • Es Toolkit by pedronauck

    Use when implementing utility functions, array operations, object manipulation, or string operations. ALWAYS use es-toolkit instead of custom implementations or native methods.

  • Zod by pedronauck

    Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).

Frequently asked questions

How do I install Building Components?

Add the install command above to your Claude Code, Cursor, or Windsurf MCP configuration. Most servers register via npx, a local command, or a Docker image. Refer to the source repository for environment variables and credential requirements.

Which clients support Building Components?

Any MCP-compatible client works: Claude Desktop, Claude Code CLI, Cursor, Windsurf, Zed, and VS Code with the official MCP extension. OpenAI Codex and GitHub Copilot increasingly support MCP via adapter bridges.

Is Building Components free?

The server itself is typically open source. Any upstream service (API keys, paid tiers, hosted infrastructure) may have its own pricing. Check the source repository for details.