Official Minimal template preview: a light landing page with restrained typography, spacious layout and a single primary action.
Capturas del proyectoAcerca de este Skill
Select a style and give your coding assistant its design foundations, component guidance, interaction states and review criteria. The reviewed GitHub index contains 67 templates; each pairs agent-facing SKILL.md instructions with a human-readable DESIGN.md.
Por qué lo elegimos
Choose a visual direction, preview the target files, then pull the selected template with the TypeUI CLI. This page keeps the repository together as one catalog item. The gallery contains credited previews from the upstream repository.
Para qué sirve
- Give a new interface a consistent visual direction.
- Reuse colors, typography, spacing and component states across screens.
- Compare styles such as Minimal, Bento and Glassmorphism before implementation.
Choose a template and load it into your project
The command below uses Minimal as an example. Replace minimal with the desired style slug. The universal output can be used by compatible agents; select your native provider when needed.
| Comando | Para qué sirve |
|---|---|
npx typeui.sh list | Browse available design directions. |
npx typeui.sh pull minimal --format skill --providers universal --dry-run | Preview the universal Skill destination without writing. |
npx typeui.sh pull minimal --format skill --providers codex,cursor,claude-code,open-code | Write the selected template for these explicitly chosen agents. |
npx typeui.sh pull minimal --format design | Pull the companion DESIGN.md for human-readable design guidance. |
Official repository and installation guideReviewed template index
Apply the design rules
Load the selected template
Ask your assistant to read the installed instructions and keep the existing framework and product requirements.
Build a coherent interface
Apply the template’s tokens, typography, spacing and component states.
Check the rendered result
Review responsive layouts, focus, contrast and long or empty states before delivery.
Official example previews
Minimal, Bento and Glassmorphism images come from registry-examples/ at the reviewed commit. They illustrate upstream templates and retain their original example branding.
Antes de usarlo
- Node.js, a package runner and network access are needed for the TypeUI CLI. Model and coding-assistant charges follow the service you use.
- Run the command inside your intended project. Select the output format and provider explicitly for unattended use; inspect --dry-run before writing.
- Use the current CLI provider identifiers, such as codex, cursor, claude-code and open-code. Agent support and final installation roots follow the host you select.
- Design guidance still needs implementation and rendered UI review in your own project. The supplied screenshots are upstream examples.
Agentes compatibles
Fuentes y referencias
Las fuentes originales se enlazan a continuación. Los puntos de partida prácticos son sugerencias editoriales de SkillHey.