How do I install the @1892/starchild Design Pack skill?

Run npx skillmds@latest add starchild-ai-agent/1892-starchild-design-pack 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 @1892/starchild Design Pack 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 @1892/starchild Design Pack?

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 @1892/starchild Design Pack free to use?

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

Who published @1892/starchild Design Pack?

starchild-ai-agent (@starchild-ai-agent) published this skill. Their other Agent Skills are listed on their SkillMD profile.

@1892/starchild Design Pack by starchild-ai-agent

Name: @1892/starchild Design Pack
Author: starchild-ai-agent

@1892/starchild Design Pack

Starchild UI/UX design + implementation playbook. Use when designing/refining interfaces, auditing UX quality, or converting design direction into concrete frontend edits. Defaults to Starchild style unless user specifies otherwise.

File contents

Starchild Design Pack

Use this skill whenever the user asks to design UI, improve UX, audit interface quality, or apply a design system.

Default Style (unless user overrides)

Primary: #F84600
Background: #000000
Surface: dark charcoal
Text: #FFFFFF
Radius: 12px–16px
Pill radius: 9999px
Font: Google Sans, fallback system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif

Hard Guardrails

User direction always wins.
Keep files simple and compact; no over-engineered token systems unless requested.
Avoid AI-generic defaults: no purple/violet/indigo/magenta accent-heavy palettes unless explicitly requested.
Always define loading/empty/error/success states.
Always include accessibility basics (contrast, keyboard focus, semantic structure).

What to Deliver

Choose the right level based on request:

UI direction (layout, hierarchy, spacing)
UX flow (states + edge cases)
Design-system tokens/components
Implementation plan (file-level edits + acceptance criteria)

If the user asks for "full":

direction → 2) UX states → 3) system tokens/components → 4) implementation plan.

Quick Audit Checklist (fast pass)

Theme foundation correct (dark vs light intent)
Radius system consistent (12–16 + pill)
Typography coherent (Google Sans default unless overridden)
CTA hierarchy obvious (contrast, placement)
Spacing breathable (not cramped)
Border noise controlled (avoid heavy boxed UI)
Interaction states present (hover/focus/disabled/loading/error)
Accessibility baseline present
Palette avoids default purple-family drift

Task → Best Resource

"Set visual direction" → docs/aesthetic-tokens.md
"Do a quick UI audit" → references/10-checklist-new-interfaces.md + checklist above
"Check fidelity to target style" → references/11-checklist-fidelity.md
"Improve UX clarity" → references/20-patterns-*.md
"Need examples/inspiration" → data/*.csv (reference only; not default authority)
"Generate token scaffolding" → scripts/design_system.py

Resource Map

docs/aesthetic-tokens.md — canonical visual tokens
docs/CREDITS.md — lineage/attribution
references/ — checklists + UX patterns
data/ — reference datasets (inspiration only)
scripts/ — utilities

Notes

Keep recommendations practical and implementation-ready.
Prefer concrete component/state guidance over abstract design talk.
Stay compatible with the project stack unless asked to switch.

---name: 1892-starchild-design-packdescription: Starchild UI/UX design + implementation playbook. Use when designing/refining interfaces, auditing UX quality, or converting design direction into concrete frontend edits. Defaults to Starchild style unless user specifies otherwise.---# Starchild Design PackUse this skill whenever the user asks to design UI, improve UX, audit interface quality, or apply a design system.## Default Style (unless user overrides)- Primary: `#F84600`- Background: `#000000`- Surface: dark charcoal- Text: `#FFFFFF`- Radius: `12px–16px`- Pill radius: `9999px`- Font: `Google Sans`, fallback `system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif`## Hard Guardrails1. User direction always wins.2. Keep files simple and compact; no over-engineered token systems unless requested.3. Avoid AI-generic defaults: **no purple/violet/indigo/magenta accent-heavy palettes** unless explicitly requested.4. Always define loading/empty/error/success states.5. Always include accessibility basics (contrast, keyboard focus, semantic structure).## What to DeliverChoose the right level based on request:- UI direction (layout, hierarchy, spacing)- UX flow (states + edge cases)- Design-system tokens/components- Implementation plan (file-level edits + acceptance criteria)If the user asks for "full":1) direction → 2) UX states → 3) system tokens/components → 4) implementation plan.## Quick Audit Checklist (fast pass)- Theme foundation correct (dark vs light intent)- Radius system consistent (12–16 + pill)- Typography coherent (Google Sans default unless overridden)- CTA hierarchy obvious (contrast, placement)- Spacing breathable (not cramped)- Border noise controlled (avoid heavy boxed UI)- Interaction states present (hover/focus/disabled/loading/error)- Accessibility baseline present- Palette avoids default purple-family drift## Task → Best Resource- "Set visual direction" → `docs/aesthetic-tokens.md`- "Do a quick UI audit" → `references/10-checklist-new-interfaces.md` + checklist above- "Check fidelity to target style" → `references/11-checklist-fidelity.md`- "Improve UX clarity" → `references/20-patterns-*.md`- "Need examples/inspiration" → `data/*.csv` (reference only; not default authority)- "Generate token scaffolding" → `scripts/design_system.py`## Resource Map- `docs/aesthetic-tokens.md` — canonical visual tokens- `docs/CREDITS.md` — lineage/attribution- `references/` — checklists + UX patterns- `data/` — reference datasets (inspiration only)- `scripts/` — utilities## Notes- Keep recommendations practical and implementation-ready.- Prefer concrete component/state guidance over abstract design talk.- Stay compatible with the project stack unless asked to switch.

Frequently asked questions