Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 45 additions & 11 deletions .agents/skills/building-components/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,56 @@
---
name: building-components
description: 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.
description: "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."
---

# Building Components

## When to use this skill
## Workflow

Use when the user is:
Follow this sequence when building a new component:

- 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
1. **Define the API** -- Decide on props, slots, and controlled/uncontrolled state. See [composition.mdx](./references/composition.mdx) and [state.mdx](./references/state.mdx).
2. **Implement the component** -- Use composition patterns (children over render props, explicit variants over boolean flags). See [principles.mdx](./references/principles.mdx).
3. **Add accessibility** -- Add ARIA roles, keyboard navigation, and focus management. See [accessibility.mdx](./references/accessibility.mdx).
4. **Style with data attributes** -- Use `data-*` attributes for state-driven styling rather than className toggling. See [data-attributes.mdx](./references/data-attributes.mdx) and [styling.mdx](./references/styling.mdx).
5. **Export types** -- Co-locate TypeScript types with the component. See [types.mdx](./references/types.mdx).
6. **Validate** -- Verify: ARIA roles present, keyboard navigation works, TypeScript types exported, design tokens used (no raw color values).
7. **Publish** -- Publish to npm or a registry. See [npm.mdx](./references/npm.mdx) or [registry.mdx](./references/registry.mdx).

## Quick Example

```tsx
import { forwardRef } from "react";

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "secondary" | "ghost";
size?: "sm" | "md" | "lg";
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
({ variant = "primary", size = "md", children, ...props }, ref) => (
<button
ref={ref}
data-variant={variant}
data-size={size}
role="button"
{...props}
>
{children}
</button>
)
);
Button.displayName = "Button";
```

## Decision Tree

- **Building a primitive** -- See [definitions.mdx](./references/definitions.mdx) + [composition.mdx](./references/composition.mdx)
- **Adding polymorphism** -- See [as-child.mdx](./references/as-child.mdx) + [polymorphism.mdx](./references/polymorphism.mdx)
- **Setting up theming** -- See [design-tokens.mdx](./references/design-tokens.mdx)
- **Publishing to a registry** -- See [registry.mdx](./references/registry.mdx) or [npm.mdx](./references/npm.mdx)
- **Writing docs** -- See [docs.mdx](./references/docs.mdx)
- **Marketplace distribution** -- See [marketplaces.mdx](./references/marketplaces.mdx)

## References

Expand Down
2 changes: 1 addition & 1 deletion .agents/skills/databricks-core/SKILL.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
name: "databricks-core"
description: "Databricks CLI operations: auth, profiles, data exploration, and bundles. Contains up-to-date guidelines for Databricks-related CLI tasks."
description: "Use when the user asks about Databricks CLI commands, authentication setup, workspace configuration, profile management, data exploration via Unity Catalog, or Databricks Asset Bundle (DAB) deployment. Configures Databricks auth and profiles, explores catalog/schema/table data, and deploys bundles."
compatibility: Requires databricks CLI (>= v0.292.0)
metadata:
version: "0.1.0"
Expand Down
Loading