Foundations

Agent skills

Bundled agent skills teach coding agents how to design and critique UI with Default File UI. Browse the catalogue, install into a project, or pull a skill through the open skills ecosystem. For kit setup see Installation.

Catalogue

Skills ship with the kit under skills/ in @default-file/ui.

  • Design File UI

    Designs, implements, and critiques distinctive frontend UI with strong visual hierarchy and light UX judgment. Use for landing pages, marketing sites, product surfaces, polish, and critique.

    Install with kit CLI

    Install design-file-ui (npm)

    npx --yes -p @default-file/ui df-ui skills install design-file-ui

    Install with skills CLI

    skills add design-file-ui

    npx skills add default-file/ui --skill design-file-ui

Examples

Install a skill, then paste one of these into your agent. You can also start with /design-file-ui.

  1. Redesign

    Design File UI

    design-file-ui redesign prompt

    Redesign this landing page using the Design File UI skill. Prefer kit components and tokens when they fit.

  2. Critique

    Design File UI

    design-file-ui critique prompt

    Critique this UI for brand hierarchy and CTA clarity using the Design File UI skill.

  3. Polish

    Design File UI

    design-file-ui polish prompt

    Polish this screen with the Design File UI skill. Keep one primary action and use Default File UI where possible.

When the project already uses Default File UI, ask the agent to discover components and tokens with df-ui show and df-ui tokens before inventing new chrome.

Discover

List every skill bundled with the kit from the CLI.

List skills

List bundled skills (npm)

npx --yes -p @default-file/ui df-ui skills list --json

Show one skill

Show design-file-ui (npm)

npx --yes -p @default-file/ui df-ui skills show design-file-ui

Install

Copy a skill into your project agent directories, or use the open skills CLI.

Kit CLI

Install design-file-ui (npm)

npx --yes -p @default-file/ui df-ui skills install design-file-ui

Open skills CLI

skills add design-file-ui

npx skills add default-file/ui --skill design-file-ui

The kit CLI writes the skill and its references to .agents/skills/<name> and .cursor/skills/<name> so agents that read either location pick it up. Installing again replaces both copies with the current release. Commit the folders to share the skill with your team.

MCP

Hosts that support MCP can browse and install skills with the same stdio server used for components.

Tools (hover for what each does): , , .

Start the server from Installation.