frontend-design SKILL.md skillA

frontend-design from thatrebeccarae/claude-marketing is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.

Install it, pinned
mdr add thatrebeccarae/claude-marketing/frontend-design@v1.0.0

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

Audit grade
A, 17 of 17 checks passed
Kind
SKILL.md skill
Repository
thatrebeccarae/claude-marketing
Path
skills/frontend-design/SKILL.md
Versions recorded
3
Latest version
v1.0.0, committed Mar 18, 2026
First version recorded
Mar 18, 2026
Size
7,483 bytes
Repository stars
191
License
MIT

Create distinctive, production-grade frontend interfaces with high design quality. Covers design thinking, typography pairing, color theory, motion design, spatial composition, and code quality. Generates real working code — HTML/CSS/JS or React — with intentional aesthetic direction, not generic AI output.

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

# Frontend Design

Create distinctive, production-grade web interfaces that avoid generic AI aesthetics.

## Install

```bash
git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/frontend-design ~/.claude/skills/
```

## Design Thinking Process

### 1. Understand Context

Before writing code, answer:
- **Purpose:** What problem does this interface solve? Who uses it?
- **Audience:** Technical sophistication, expectations, emotional state when arriving
- **Constraints:** Framework requirements, browser support, performance budget, accessibility needs

### 2. Commit to an Aesthetic Direction

Choose a specific point of view — not "clean and modern" but a real aesthetic:

| Direction | Characteristics |
|-----------|----------------|
| Brutally minimal | Monochrome, system fonts, stark spacing, no decoration |
| Maximalist | Dense, layered, multiple type scales, rich texture |
| Retro-futuristic | Neon accents, dark backgrounds, grid lines, monospace |
| Organic/natural | Soft shapes, earth tones, hand-drawn elements, warm |
| Luxury/refined | Thin serifs, generous whitespace, muted palette, restrained |
…

Read the whole file at its exact version.

How to install

The exact contents, by fingerprint
mdr add thatrebeccarae/claude-marketing/frontend-design@sha256:36297a18f39461b0

The line at the top of this page pins the label v1.0.0, 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_bzvbxprrg2thu67z.svg)](https://markdownregistry.com/a/art_bzvbxprrg2thu67z)

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

Versions

The registry has recorded 3 versions of this file, all committed on Mar 18, 2026.

versioncommittedcommitsizeaudit
v1.0.0 latest2026-03-18 13b4d57 7,483 BA view · diff
v1.0.02026-03-18 3bce69b 7,271 BA view · diff
v1.0.02026-03-18 61c70b6 6,832 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 (7483 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

thatrebeccarae/claude-marketing · 191 stars · license MIT · pushed 2026-05-14 · branch main

API

GET https://markdownregistry.com/api/v1/artifacts/art_bzvbxprrg2thu67z
GET https://markdownregistry.com/api/v1/resolve?ref=thatrebeccarae/claude-marketing/frontend-design
GET https://markdownregistry.com/api/v1/blob/36297a18f39461b028b55fdc9ff5b29a02fdabf073e3312e9b50aaccacf74fd5

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 thatrebeccarae/claude-marketing

ab-testing-framework SKILL.md skill
thatrebeccarae/claude-marketing · skills/ab-testing-framework/SKILL.md · A/B and multivariate testing methodology. Design experiments, calculate sample sizes, determine statistical…
v1.0.0 · audit A · 191 stars
account-structure-review SKILL.md skill
thatrebeccarae/claude-marketing · skills/account-structure-review/SKILL.md · Google and Meta paid media account structure evaluation. Audits campaign/ad set architecture against conversion volume…
v1.0.0 · audit A · 191 stars
aeo-geo-optimizer SKILL.md skill
thatrebeccarae/claude-marketing · skills/aeo-geo-optimizer/SKILL.md · Answer Engine Optimization (AEO) and Generative Engine Optimization (GEO) specialist. Optimize content and websites to…
v1.0.0 · audit A · 191 stars
brand-dna SKILL.md skill
thatrebeccarae/claude-marketing · skills/brand-dna/SKILL.md · Extract brand identity from a website URL — voice, colors, typography, imagery, values, and target audience — into a…
v1.0.0 · audit A · 191 stars
brand-voice-guidelines SKILL.md skill
thatrebeccarae/claude-marketing · skills/brand-voice-guidelines/SKILL.md · Develop brand voice, tone matrices, messaging frameworks, and brand book documentation. Use when the user asks about…
v1.0.0 · audit A · 191 stars
braze SKILL.md skill
thatrebeccarae/claude-marketing · skills/braze/SKILL.md · Braze customer engagement platform expertise. Audit campaigns, Canvases, segments, messaging channels, and data…
v1.0.0 · audit A · 191 stars
cold-email-outreach SKILL.md skill
thatrebeccarae/claude-marketing · skills/cold-email-outreach/SKILL.md · Cold email and outreach sequence design with personalization, deliverability optimization, follow-up cadence, and…
v1.0.0 · audit A · 191 stars
competitor-ads-analyst SKILL.md skill
thatrebeccarae/claude-marketing · skills/competitor-ads-analyst/SKILL.md · Extract and analyze competitor advertising from public ad libraries (Facebook Ad Library, Google Ads Transparency…
v1.0.0 · audit A · 191 stars
content-creator SKILL.md skill
thatrebeccarae/claude-marketing · skills/content-creator/SKILL.md · Comprehensive content marketing toolkit with brand voice analysis, SEO optimization scripts, content frameworks, social…
v1.0.0 · audit A · 191 stars
content-pipeline SKILL.md skill
thatrebeccarae/claude-marketing · skills/content-pipeline/SKILL.md · End-to-end content creation workflow that orchestrates research, editorial review, and social distribution agents in…
v1.0.0 · audit A · 191 stars
content-workflow SKILL.md skill
thatrebeccarae/claude-marketing · skills/content-workflow/SKILL.md · End-to-end content creation pipeline from research through editorial review to social distribution. Orchestrates a…
v1.0.0 · audit A · 191 stars
copywriting-frameworks SKILL.md skill
thatrebeccarae/claude-marketing · skills/copywriting-frameworks/SKILL.md · Framework-driven copywriting for ads, landing pages, emails, sales pages, and CTAs. Includes AIDA, PAS, BAB, 4Ps…
v1.0.0 · audit A · 191 stars

Every file in thatrebeccarae/claude-marketing

Other files named frontend-design

frontend-design SKILL.md skill
anthropics/skills · skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
git:20260903.41bbe19 · audit A · 189,583 stars
frontend-design SKILL.md skill
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…
git:20260121.08101aa · audit A · 85,141 stars
frontend-design SKILL.md skill
anthropics/claude-plugins-official · plugins/frontend-design/skills/frontend-design/SKILL.md · Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with…
git:20260901.44490cc · audit A · 46,363 stars
frontend-design SKILL.md skill
anbeime/skill · skills/frontend-design/frontend-design/SKILL.md · 网页与数字界面设计师在构建Web页面或应用组件时,若受够了千篇一律的AI味设计,请用此技能。一键生成极具视觉冲击力、排版独特、动效惊艳的生产级前端代码,告别平庸,打造令人难忘的高品质数字界面。
git:20260826.d5f7a6e · audit A · 9,288 stars
frontend-design SKILL.md skill
orkas-ai/orkas · resources/builtin/marketplace/agents/79df9cc89f5f/skills/frontend-design/SKILL.md
git:20261104.00a1599 · audit B · 9,072 stars
frontend-design SKILL.md skill
mvschwarz/openrig · packages/daemon/specs/agents/shared/skills/process/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
git:20260802.4c6d888 · audit A · 8,636 stars
frontend-design SKILL.md skill
mvschwarz/openrig · skills/_canonical/process/frontend-design/SKILL.md · Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to…
git:20260802.4c6d888 · audit A · 8,636 stars
frontend-design SKILL.md skill
steipete/agent-scripts · skills/frontend-design/SKILL.md · Frontend UI: pages, apps, components, polished non-generic design.
git:20260523.0a2d76c · audit A · 7,470 stars

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