Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Vc Frontend Design · withkynam | DecimalAI

frontendby withkynam

Vc Frontend Design

withkynam/vc-frontend-design

Source withkynam/vibecode-pro-max-kit ↗License MIT

Create polished frontend interfaces from designs/screenshots/videos.

SkillScore91Maintained

Automatic

Frontend / UI pack

Last verified 8/16/2026

What it changes

Passed 21 of 23 test cases with the skill, and 17 of 23 without it.

Without skill74%

With skill91%

Checks it passed that the model alone missed

Includes a TL;DR summary at the start of the response.
Begins the response with a concise TL;DR summary section.
Includes a TL;DR summary before the detailed response and code.

and 1 more in the full report

4 fixed17 passed either way2 still failing0 broke

Pass-rate lift: +17 pp
Tokens: +58%
Agent turns: 0%
Response time: -23%

Model gemini-3.6-flashMeasured 8/16/2026v121 of 23 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/withkynam-vc-frontend-design/SKILL.md https://app.decimal.ai/s/withkynam-vc-frontend-design/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add withkynam-vc-frontend-design, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/withkynam-vc-frontend-design/ and pins it in .decimal/skills.lock

decimalai skills add withkynam-vc-frontend-design

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/withkynam-vc-frontend-design/SKILL.md https://app.decimal.ai/s/withkynam-vc-frontend-design/SKILL.md

Raw file: /s/withkynam-vc-frontend-design/SKILL.md ↗ · machine-readable summary at /s/withkynam-vc-frontend-design.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 4

Prompt

When executing a screenshot replication workflow, after visually analyzing, planning, implementing, and verifying the interface, what final context file update step is required?

What was checked, without and with the skill
Checked	Without skill	With skill
Updates process/context/all-context.md or the relevant context document.	Missed	Passed

case-18 · gemini-3.6-flash · 8/16/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md125 lines29 files

Output style: Follow process/development-protocols/communication-standards.md — answer-first, plain language, no unexplained jargon, TL;DR on long responses.

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

IMPORTANT: MUST follow Design Thinking, Frontend Aesthetics Guidelines, Asset & Analysis References, and Anti-Patterns (AI Slop) sections below. DO NOT skip these rules.

Workflow Selection

Choose workflow based on input type:

Input	Workflow	Reference
Screenshot	Replicate exactly	`./references/workflow-screenshot.md`
Video	Replicate with animations	`./references/workflow-video.md`
Screenshot/Video (describe only)	Document for devs	`./references/workflow-describe.md`
3D/WebGL request	Three.js immersive	`./references/workflow-3d.md`
Quick task	Rapid implementation	`./references/workflow-quick.md`
Complex/award-quality	Full immersive	`./references/workflow-immersive.md`
Existing project upgrade	Redesign Audit	`./references/redesign-audit-checklist.md`
From scratch	Design Thinking below	-

All workflows: Invoke the ui-ux-designer subagent FIRST for design intelligence.

Precedence: When anti-slop rules (below) conflict with ui-ux-designer recommendations (e.g., Inter font, AI Purple palette, Lucide-only icons), substitute with alternatives from ./references/anti-slop-rules.md unless the user explicitly requested the conflicting choice.

Screenshot/Video Replication (Quick Reference)

Analyze with Claude's built-in multimodal vision - extract colors, fonts, spacing, effects
Plan with ui-ux-designer subagent - create phased implementation
Implement - match source precisely
Verify - compare to original
Document - read process/context/all-context.md, then update process/context/all-context.md, the project's UI/UX context doc (if present), or the relevant grouped context file if approved

See specific workflow files for detailed steps.

Design Dials

Three configurable parameters that drive design decisions. Set defaults at session start or let user override via chat:

Track record

Benchmark

21 / 23

test cases passed, vs 17 / 23 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

withkynam / vibecode-pro-max-kit

.claude/skills/vc-frontend-design/SKILL.md

View on GitHub ↗

License Complete terms in LICENSE.txtImported 8/3/2026Version v1Bundled 28 files

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

More skills from the same source and nearby in the registry, with their headline benchmark lift.