Build high-quality, production-grade frontend interfaces, components, and web UIs — from landing pages and dashboards to React components and full design systems. Implements a design-first workflow: visual hierarchy and typography before code, reusable component architecture, performance optimization, and WCAG 2.1 AA accessibility baseline.
Purpose: Delivers frontend work that looks polished, is maintainable, and scales — not just functional but production-ready.
When to trigger: (1)…
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
## Relationship with `ui-ux-pro-max`
When both `ui-ux-pro-max` and `frontend` could apply:
- `ui-ux-pro-max` **leads** on visual/interface decisions, design systems, color, typography, layout
- `frontend` **handles** component-level code quality, React patterns, state management, performance, accessibility implementation
Do not duplicate design decisions — implement what ui-ux-pro-max specifies.
# Frontend Design Skill
## Core Principles
- **Design-first thinking**: Consider visual hierarchy, spacing, and typography before writing code
- **Component architecture**: Build reusable, composable components
- **Performance**: Lazy load, minimize bundle size, optimize images
- **Accessibility**: WCAG 2.1 AA as baseline — semantic HTML, ARIA labels, keyboard navigation
## Stack Defaults (adjust to user's context)
- React + TypeScript
- Tailwind CSS for utility-first styling
- Framer Motion for animations
- Lucide React for icons
## Design System Checklist
- Consistent spacing scale (4px base unit)
- Limited color palette (primary, secondary, neutral, semantic)
- Typography scale (display, heading, body, caption)
…
The line at the top of this page pins the label git:20260508.9e8707b, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_yqxmekm4hoqrwxcq
GET https://markdownregistry.com/api/v1/resolve?ref=tekkiiiii/the-agency/frontend
GET https://markdownregistry.com/api/v1/blob/745b5dab05a8b864f6ec5bfd60fef2798fec1f7a9a3aa94d45d0c245e6d0b1a3
Your AI assistant 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.
tekkiiiii/the-agency · agents-archive/dept-sunset-2026-10-08/skills/dept-resume/SKILL.md · Read dept-state.md and spawn a Dept Head with a lean briefing. Department-operations parallel of /pd-resume.
tekkiiiii/the-agency · agents-archive/dept-sunset-2026-10-08/skills/dept-save-state/SKILL.md · Write dept-state.md and member-roster.md at end of department session. Department-operations parallel of /save-state.
tekkiiiii/the-agency · agents-archive/dept-sunset-2026-10-08/skills/dept-status/SKILL.md · Read-only department status digest. No spawns. Shows active coords, pipelines, open issues, and incoming tasks.
tekkiiiii/the-agency · agents-archive/dept-sunset-2026-10-08/skills/room-manager-digest/SKILL.md · Use on /room-manager-digest, a 12h cron, or when a dept head wants a fresh report. Reads each dept room's rolling.md…
tekkiiiii/the-agency · agents-archive/dept-sunset-2026-10-08/skills/room-manager/SKILL.md · Use on /room-manager, every 10 minutes as a background loop, or when new room activity is suspected (handoff file…
tekkiiiii/the-agency · agents-archive/rev001-curator-2026-10-12/skills/obsidian-vault/SKILL.md · Use to forward decisions, project learnings, skill creations and generated assets to the Obsidian vault, and to read it…
tekkiiiii/the-agency · scripts/tests/fixtures/jev/router-skills/content-polish/SKILL.md · Polish drafted content to publish-ready in one pass; English and Vietnamese.
tekkiiiii/the-agency · scripts/tests/fixtures/jev/router-skills/frontend/SKILL.md · Use when building frontend UIs: "build a landing page", "make a dashboard", "write a React component". Not for…
code-yeongyu/oh-my-openagent · packages/shared-skills/skills/frontend/SKILL.md · Builds, styles, and polishes anything drawn with HTML, CSS, or SVG: web UI, pages, components, HTML reports rendered to…
code-yeongyu/oh-my-openagent · packages/skills-loader-core/src/features/builtin-skills/frontend/SKILL.md · Builds, styles, and polishes web UI and UX. Use for any frontend, page, component, styling, layout, animation, or…
oyadotai/oya-browser · .claude/skills/frontend/SKILL.md · Use when building or changing anything in the frontend: a page, a component, a layout, styling, copy on screen…
nerds-odd-e/doughnut · .agents/skills/frontend/SKILL.md · Vue frontend — components, Vitest, generated API client, apiCallWithLoading, DaisyUI. Read this first for any frontend…
