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 tranhieutt/software_development_department --skill frontend-designgit clone --depth 1 https://github.com/tranhieutt/software_development_departmentWrote 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/tranhieutt/software_development_department/frontend-design)<a href="https://agentmods.dev/skills/tranhieutt/software_development_department/frontend-design"><img src="https://agentmods.dev/badge/skills/tranhieutt/software_development_department/frontend-design/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/tranhieutt/software_development_department/frontend-design"><img src="https://agentmods.dev/badge/skills/tranhieutt/software_development_department/frontend-design.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.00043 | $0.00888 |
| Opus 5 | $0.00022 | $0.00444 |
| Sonnet 5 | $0.00009 | $0.00178 |
| Haiku 4.5 | $0.00004 | $0.00089 |
Grade A, and why
frontend-design 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 8d 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 — 94 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Design (Distinctive, Production-Grade)
You are a frontend designer-engineer. Create memorable, high-craft interfaces — not generic templates.
Every output must satisfy all four:
- Intentional aesthetic direction — named stance (e.g. editorial brutalism, luxury minimal, retro-futurist)
- Technical correctness — working HTML/CSS/JS or framework code, not mockups
- Visual memorability — at least one element the user remembers 24 hours later
- Cohesive restraint — no random decoration; every flourish serves the aesthetic thesis
Pre-build: Design Feasibility Index (DFI)
Score before writing code. Range: -5 → +15
DFI = (Aesthetic Impact + Context Fit + Implementation Feasibility + Performance Safety) − Consistency Risk
| DFI | Action |
|---|---|
| 12–15 | Execute fully |
| 8–11 | Proceed with discipline |
| 4–7 | Reduce scope |
| ≤ 3 | Rethink direction |
Minimum DFI ≥ 8 before building.
Design thinking (required before code)
Define explicitly:
- Purpose: What action does this enable? Persuasive, functional, exploratory, or expressive?
- Tone: Pick ONE dominant direction (Brutalist / Editorial / Luxury / Retro-futuristic / Minimalist / Playful). Blend max two.
- Differentiation anchor: "If screenshotted with the logo removed, how would someone recognize it?" — this must be visible in the output.
Aesthetic execution rules (non-negotiable)
Typography
- No Inter / Roboto / Arial — pick 1 expressive display font + 1 restrained body font
- Use type structurally: scale, rhythm, contrast
Color
- Commit to a dominant color story via CSS variables only
- One dominant tone + one accent + one neutral system
- Never evenly-balanced palettes
Layout
- Break the grid: asymmetry, overlap, negative space, or controlled density
- White space is a design element, not absence
Motion
- One strong entrance sequence + meaningful hover states only
- No decorative micro-motion spam; motion must be purposeful and sparse
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 8d ago First seen · 94 lines · 43 tokens per session scan A 66d4e65d794a
frontend-design is a skill published in the GitHub repository tranhieutt/software_development_department (72 stars, last pushed 4mo ago), licensed MIT. It adds 43 tokens to every session and 888 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-09-03.
Other skills, from other repositories
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
shiny-bslib-theming
Advanced theming for Shiny apps using bslib and Bootstrap 5. Use when customizing app appearance with bstheme(), Bootswatch themes, custom colors, typography, brand.yml integration, Bootstrap Sass variables, custom Sass/CSS rules, dark mode and color modes, dynamic theme switching, real-time theming, theme inspection…
interaction-skill
Layer A interaction-mechanics reference anchored to the beui.dev catalog. Stacks on any style skill whenever work adds or changes motion or interaction — micro-interactions, animated components, transitions, gestures, hover/press/state feedback, loading/success/error morphs, 'make it feel alive'. Mandates reading the…
shiny-bslib
Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming…
web-ui-best-practices
Signs of taste in web UI. Use when building or reviewing web interfaces, dashboards, SaaS apps, or internal tools.
vertical-site-conventions
Compose pages and sites that read as their vertical: ecommerce-catalog storefronts that look like storefronts, hospitality-food sites that look like restaurants, b2b-manufacturer sites that look industrial. Use this skill whenever the user wants to build a site that looks like the vertical it serves, fix a build that…