design SKILL.md skillA

design from afonsoft/skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add afonsoft/skills/design@v1.1.1

Pins v1.1.1 in mdr.lock. Pin the fingerprint instead.

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
afonsoft/skills
Path
skills/design/SKILL.md
Versions recorded
5
Latest version
v1.1.1, committed Sep 12, 2026
First version recorded
Sep 11, 2026
Size
10,545 bytes
Repository stars
14
License
MIT

Use when designing, redesigning, or improving a frontend interface in Angular, React, or Blazor. Use for landing pages, dashboards, components, forms, and responsive layouts that must work mobile-first and then scale to desktop.

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

# Design — Frontend UI Design for Angular, React & Blazor

You are a senior frontend design lead. Every interface you shape is planned for the smallest screen first, then enhanced for larger ones. Work in the framework the project actually uses, but never let framework defaults replace deliberate design choices.

## When to Use

- The user asks to design, redesign, polish, or critique a frontend UI.
- The project uses Angular, React, or Blazor (or the target is not yet known).
- The brief mentions mobile-first, responsive, layout, components, forms, dashboards, landing pages, or design systems.
- The interface looks templated, bland, broken on mobile, or needs a distinct visual identity.

## Core Principles

1. **Mobile-first, always.** Start the design at 375px. Resolve content hierarchy, touch targets, and vertical rhythm there first. Then add columns, sidebars, and widows for larger breakpoints.
2. **Framework is a delivery target, not a creative director.** Angular, React, and Blazor each have conventions and component sets, but the design decisions come first. Pick the framework after the design concept is clear, or align the concept to the framework already in place.
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add afonsoft/skills/design@sha256:4af6c1625f054db2

The line at the top of this page pins the label v1.1.1, 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.

Badge

mdr badge

[![mdr](https://markdownregistry.com/badge/art_xsst4edtme45j4yg.svg)](https://markdownregistry.com/a/art_xsst4edtme45j4yg)

4 badge image fetches in 30 days. What the badge shows.

Versions

The registry has recorded 5 versions of this file, between Sep 11, 2026 and Sep 12, 2026, more than one a day.

versioncommittedcommitsizeaudit
v1.1.1 latest2026-09-12 cf88aa9 10,545 BA view · diff
v1.1.02026-09-12 f327983 10,545 BA view · diff
v1.0.02026-09-11 bb77d3c 10,545 BA view · diff
v1.0.02026-09-11 8cacbe7 9,100 BA view · diff
v1.0.02026-09-11 641d75e 8,429 BA view

Audit of the latest version

A  17 of 17 checks passed. Fixed automatic checks with no AI involved, so the same checks give the same answer every run.
  • pass: Frontmatter block present
  • pass: Frontmatter declares a name
  • pass: Frontmatter declares a description
  • pass: Size between 200 bytes and 200 KB (10545 bytes)
  • pass: No zero-width or bidi control characters
  • pass: No instruction hidden inside an HTML comment
  • pass: No link to an exfiltration or paste host
  • pass: No credential-shaped string
  • pass: No instruction to send local credentials anywhere
  • pass: No text hidden with inline styles
  • pass: No prompt-injection phrasing
  • pass: No curl or wget piped into a shell
  • pass: No recursive delete of root, home or parent
  • pass: No instruction to read or print local credentials
  • pass: No base64 blob over 200 characters
  • pass: No link to a raw IP address
  • pass: No script tag

Source

GitHub

afonsoft/skills · 14 stars · license MIT · pushed 2026-10-27 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_xsst4edtme45j4yg
GET https://markdownregistry.com/api/v1/resolve?ref=afonsoft/skills/design
GET https://markdownregistry.com/api/v1/blob/4af6c1625f054db24828f508c9cf2cba81ab8848b9815ef6d17dbae1364b7228

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.

Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.

More from afonsoft/skills

architecture SKILL.md skill
afonsoft/skills · skills/architecture/SKILL.md · Single owner of everything under docs/architecture/ — ADRs, architecture and design documents, and architecture…
v1.0.1 · audit A · 14 stars
building-mcp-servers SKILL.md skill
afonsoft/skills · skills/building-mcp-servers/SKILL.md · Use when building a new MCP server in TypeScript, Python, or C# that exposes tools to LLMs.
v1.4.0 · audit A · 14 stars
code-review-and-quality SKILL.md skill
afonsoft/skills · skills/code-review-and-quality/SKILL.md · Use when reviewing code before it merges, whether written by an agent or a human.
v1.1.1 · audit A · 14 stars
composio-mcp SKILL.md skill
afonsoft/skills · skills/composio-mcp/SKILL.md · Use when the user asks to connect an AI agent to external apps via Composio, or when Composio CLI or MCP setup fails.
v1.1.1 · audit B · 14 stars
create-agent-harness SKILL.md skill
afonsoft/skills · skills/create-agent-harness/SKILL.md · Use when initializing or migrating an AI agent harness in a repository.
v2.3.0 · audit B · 14 stars
create-issues SKILL.md skill
afonsoft/skills · skills/create-issues/SKILL.md · Use when turning approved plans, specs, PRDs, or Epics into trackable GitHub Issues.
v1.4.0 · audit B · 14 stars
create-readme SKILL.md skill
afonsoft/skills · skills/create-readme/SKILL.md · Use when generating or updating a project README.md or CHANGELOG.md.
v1.2.1 · audit A · 14 stars
diagnose SKILL.md skill
afonsoft/skills · skills/diagnose/SKILL.md · Use when the user reports a hard bug, unexpected failure, or performance regression that needs root-cause analysis.
v1.5.0 · audit A · 14 stars
drawio-architecture SKILL.md skill
afonsoft/skills · skills/drawio-architecture/SKILL.md · Use when generating or editing draw.io/diagrams.net architecture diagrams via MCP or native XML.
v1.0.2 · audit A · 14 stars
execute-specs SKILL.md skill
afonsoft/skills · skills/execute-specs/SKILL.md · Use when the user asks to implement an approved SPEC SDD using test-driven development.
v1.4.0 · audit A · 14 stars
gap-analysis SKILL.md skill
afonsoft/skills · skills/gap-analysis/SKILL.md · Use when auditing a repository for evidence-backed gaps between code, SPECs, architecture, and documentation — before a…
v1.0.2 · audit B · 14 stars
improve-codebase-architecture SKILL.md skill
afonsoft/skills · skills/improve-codebase-architecture/SKILL.md · Use when the user wants to improve architecture, consolidate tightly-coupled modules, or make a codebase more testable.
v1.1.1 · audit A · 14 stars

Every file in afonsoft/skills

Other files named design

design SKILL.md skill
yeachan-heo/gajae-code · packages/coding-agent/test/fixtures/gjc-plugins/valid-six-surface-bundle/subskills/design/SKILL.md · Adds domain design guidance for ralplan planner phase.
git:20260626.8caa779 · audit A · 3,048 stars
design SKILL.md skill
yeachan-heo/gajae-code · packages/coding-agent/test/fixtures/gjc-plugins/malicious-mixed-root/subskills/design/SKILL.md · Valid binding in mixed root.
git:20260605.e17540f · audit B · 3,048 stars
design SKILL.md skill
yeachan-heo/gajae-code · packages/coding-agent/test/fixtures/gjc-plugins/valid-skill-plugin/subskills/design/SKILL.md · Adds domain design guidance for ralplan planner phase.
git:20260605.e17540f · audit A · 3,048 stars
design SKILL.md skill
jeremylongshore/tons-of-skills-marketplace · plugins/ai-agency/hyperflow/skills/design/SKILL.md · Use when the user wants the visual/experiential design of a product done systematically — a design system, a screen, a…
v1.0.0 · audit A · 2,897 stars
design SKILL.md skill
sethgammon/citadel · skills/design/SKILL.md · Generates and maintains a design manifest for visual consistency. In existing projects, reads current styles and…
git:20260611.0f3f8e7 · audit A · 929 stars
design SKILL.md skill
ericrisco/rsc-harness · skills/design/SKILL.md · Use when designing, redesigning, restyling or reviewing a web page or app screen (landing, product site, portfolio…
git:20261026.55c72f8 · audit A · 429 stars
design SKILL.md skill
adityaraj0421/naksha-studio · skills/design/SKILL.md · Assembles a virtual design team to produce production-quality UI, UX, visual, social media, email, and data output. A…
git:20261018.ab04699 · audit A · 350 stars
design SKILL.md skill
firecrawl/firecrawl-claude-plugin · skills/design/SKILL.md · Extract a reference website's design system into DESIGN.md with tokens, layout, components, and imagery. Use for…
git:20261020.2399d67 · audit A · 252 stars

Browse by kind, by grade A, or by owner.