How do I install the Design skill?

Run npx skillmds@latest add freecodecamp-universe/design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design?

freecodecamp-universe (@freecodecamp-universe) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design by freecodecamp-universe — Agent Skill

Name: Design
Author: freecodecamp-universe

Design

Add, update, or theme UI in a project using the freeCodeCamp UIKit copy-source registry. Use when creating or editing any UI - buttons, modals, forms, tabs, badges, toasts, icons, layout - or when touching design tokens, colors, spacing, typography, or dark/light theming.

File contents

freeCodeCamp UIKit (copy-source registry)

Components are COPIED into this project's source, shadcn-style. Nothing installs from npm.

Adding a component

GET https://design.freecodecamp.org/registry/index.json - every item, its raw file URLs, npm deps, registry deps, and the registry version.
Copy registryDependencies first (always theme; sometimes shared hooks).
Fetch each files[].url verbatim and write it to files[].target (default src/ui/<slug>/).
Import the component CSS once, globally.
Need props or usage? https://design.freecodecamp.org/components/<slug>.md.

First-time setup in a project

Follow https://design.freecodecamp.org/registry/starter.md - theme install, self-hosted fonts, directory layout.

Rules

Keep CSS custom property (token) names intact - components reference them.
Recolour by editing token VALUES in src/ui/theme/tokens.css. Never hard-code colors in component CSS.
Dark is default; class="light-palette" on <html> for light.
Copied source is this project's code - tailor it freely, but do not re-fetch to "update" without diffing local edits first.

Frequently asked questions