Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add dork-labs/dorkos --skill designing-frontendgit clone --depth 1 https://github.com/dork-labs/dorkosWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/dork-labs/dorkos/designing-frontend)<a href="https://agentmods.dev/skills/dork-labs/dorkos/designing-frontend"><img src="https://agentmods.dev/badge/skills/dork-labs/dorkos/designing-frontend/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/dork-labs/dorkos/designing-frontend"><img src="https://agentmods.dev/badge/skills/dork-labs/dorkos/designing-frontend.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00045 | $0.03055 |
| Opus 5 | $0.00023 | $0.01528 |
| Sonnet 5 | $0.00009 | $0.00611 |
| Haiku 4.5 | $0.00005 | $0.00305 |
Grade A, and why
designing-frontend scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 276 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design: Calm Tech Design Language
This skill guides design thinking and decision-making for frontend interfaces. It focuses on the what and why of design, not the implementation details.
For implementation (how to code it): Use the styling-with-tailwind-shadcn skill.
Design Philosophy: Calm Tech
Our design system embraces "Calm Tech" — interfaces that feel sophisticated, spacious, and effortless.
Core Principles
- Clarity over decoration — Every element earns its place
- Soft depth over flat — Subtle shadows and layers create hierarchy without noise
- Generous space on content surfaces — Breathing room makes content shine; control surfaces run dense (see below)
- Micro-delight — Thoughtful animations that feel tactile and responsive
Two Spatial Modes
"Generous space" is a content rule. Control surfaces follow density instead.
| Content surface | Control surface | |
|---|---|---|
| Examples | Pages, cards, empty states, reading views | Sidebars, toolbars, list panes, menus, table rows |
| Body text | 15–16px | 13px, metadata 11px |
| Row height | — | 28–32px (4px-grid multiples) |
| Inset | 16–24px and up | 16px total, panel edge to first glyph |
| Panel width | — | 240–280px for nav sidebars |
The test: does the user operate this surface many times an hour, or read it? Operating wants density; reading wants air.
Density is not noise — a compact nav fits about 1.5x more items in the same space and reads calmer, because the eye travels less. The failure this rule prevents is real: "generous space" read without the nuance produced a sidebar with a 30px left inset (12px container + 8px section + 10px row). Budget the inset once. Never stack container + section + row padding.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 276 lines · 45 tokens per session scan A 927fff75855d
designing-frontend is a skill published in the GitHub repository dork-labs/dorkos (9 stars, last pushed today), licensed MIT. It adds 45 tokens to every session and 3,055 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
design-system
Use when a ticket needs a systematic token + component foundation for a frontend — the three-layer token architecture (primitive → semantic → component), component specs with full state coverage, or a recommendation for which design system a product should have. Invoke for "set up design tokens", "define the component…
frontend-design
Use when a ticket builds or reworks a user-facing frontend surface — a hero, landing page, dashboard, marketing section, or any screen where the visual quality matters, not just the markup. Produces distinctive, intentional, production-grade UI that avoids generic template aesthetics. Invoke for "build the landing…
frontend-foundations
Use on any frontend delivery to hold the surface-specific quality floor that engineering-craft doesn't cover — intentional visual hierarchy over template defaults, accessible-by-default markup, design tokens instead of hardcoded values, reusable components matching the repo, and compositor-friendly motion. Invoke…
design-restore
A set of rules for reproducing an administrative interface from reference screenshots with high visual accuracy.
restore
A workflow for rebuilding a working admin dashboard from reference screenshots and written specifications. It coordinates planning, code generation and checking for visual accuracy.
frontend-design
Frontend design standards and aesthetic guidelines. Provides grading criteria for visual design quality, originality, craft, and functionality. Referenced by the planner and frontend evaluator. Not directly user-invocable.