frontend-design is agent-read markdown (skill) from dicklesworthstone/pi_agent_rust: Design and implement distinctive, production-ready frontend interfaces with strong aesthetic direction. Use when asked to create or restyle web pages, components, or applications (HTML/CSS/JS, React, Vue, etc.)..
Indexed from public GitHub and served as immutable, content-addressed versions. Install it pinned to an exact SHA-256 with the mdr CLI, and every file is verified against the hash recorded here before it reaches your agent. The deterministic audit below grades the latest version, and the same file always earns the same grade.
What the file says
# Frontend Design Skill
Design and implement memorable frontend interfaces with a clear, intentional aesthetic. The output must be real, working code — not just mood boards. This skill is about **design thinking + execution**: every visual choice should be rooted in purpose and context.
## When to Use
Use this skill when the user wants to:
- Create a new web page, landing page, dashboard, or app UI
- Design or redesign frontend components or screens
- Improve typography, layout, color, motion, or overall visual polish
- Convert a concept or brief into a high‑fidelity, coded interface
## Inputs to Gather (or Assume)
Before coding, identify:
- **Purpose & audience**: What problem does this UI solve? Who uses it?
- **Brand/voice**: Any reference brands, tone, or visual inspiration?
- **Technical constraints**: Framework, library, CSS strategy, accessibility, performance
- **Content constraints**: Required copy, assets, data, features
If the user did not provide this, ask **2–4 targeted questions**, or state reasonable assumptions in a short preface.
## Design Thinking (Required)
Commit to a **single, bold aesthetic direction**. Name it and execute it consistently. Examples:
…
Pin to a label to follow the author's releases, or to a sha256 to freeze the exact bytes forever. Either way the resolved hash is written to mdr.lock, and mdr install reproduces it on any machine.
GET https://markdownregistry.com/api/v1/artifacts/art_yl5wzgj2wbkplvkh
GET https://markdownregistry.com/api/v1/resolve?ref=dicklesworthstone/pi_agent_rust/frontend-design
GET https://markdownregistry.com/api/v1/blob/94f3c664e469abbc978a34eec366014d2abdfd80761de6e9bbbd4a6d83e801ab
Your agent does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
dicklesworthstone/pi_agent_rust · .claude/skills/pi-agent-rust/SKILL.md · Speeds up pi_agent_rust development and verification workflows. Use when editing providers, tools, sessions…
dicklesworthstone/pi_agent_rust · legacy_pi_mono_code/pi-mono/packages/coding-agent/examples/extensions/dynamic-resources/SKILL.md · Example skill loaded from resources_discover
dicklesworthstone/pi_agent_rust · legacy_pi_mono_code/pi-mono/packages/coding-agent/test/fixtures/skills/consecutive-hyphens/SKILL.md · A skill with consecutive hyphens in the name.
dicklesworthstone/pi_agent_rust · legacy_pi_mono_code/pi-mono/packages/coding-agent/test/fixtures/skills/disable-model-invocation/SKILL.md · A skill that cannot be invoked by the model.
dicklesworthstone/pi_agent_rust · legacy_pi_mono_code/pi-mono/packages/coding-agent/test/fixtures/skills/invalid-name-chars/SKILL.md · A skill with invalid characters in the name.
dicklesworthstone/pi_agent_rust · legacy_pi_mono_code/pi-mono/packages/coding-agent/test/fixtures/skills/long-name/SKILL.md · A skill with a name that exceeds 64 characters.
anthropics/skills · skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
bytedance/deer-flow · skills/public/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
thinkinaixyz/deepchat · resources/skills/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
iflytek/skillhub · builtin-skills/skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
