Ready to supercharge your AI agents?

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

Get Started Free →

🌐 Modern Web Architect (Master Skill) · dokhacgiakhoa | DecimalAI

frontendby dokhacgiakhoa

🌐 Modern Web Architect (Master Skill)

dokhacgiakhoa/modern-web-architect

Source dokhacgiakhoa/agent-skills-4-vibe-coding-cli ↗License NOASSERTION

Master Frontend & Web Architecture.

SkillScore82Maintained

Automatic

Frontend / UI pack

Last verified 8/29/2026

What it changes

Passed 18 of 22 test cases with the skill, and 16 of 22 without it.

Without skill73%

With skill82%

Checks it passed that the model alone missed

Recommend Turborepo with intelligent caching
Define Phase 1 as Design Thinking focusing on tone and aesthetic direction

2 fixed16 passed either way4 still failing0 broke

Pass-rate lift: +9 pp
Tokens: +41%
Agent turns: 0%
Response time: -1%

Model gemini-3.6-flashMeasured 8/29/2026v118 of 22 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/dokhacgiakhoa-modern-web-architect/SKILL.md https://app.decimal.ai/s/dokhacgiakhoa-modern-web-architect/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add dokhacgiakhoa-modern-web-architect, 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/dokhacgiakhoa-modern-web-architect/ and pins it in .decimal/skills.lock

decimalai skills add dokhacgiakhoa-modern-web-architect

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

curl -fsSL --create-dirs -o .claude/skills/dokhacgiakhoa-modern-web-architect/SKILL.md https://app.decimal.ai/s/dokhacgiakhoa-modern-web-architect/SKILL.md

Raw file: /s/dokhacgiakhoa-modern-web-architect/SKILL.md ↗ · machine-readable summary at /s/dokhacgiakhoa-modern-web-architect.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

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

1 of 2

Prompt

When following a structured 5-phase rollout execution protocol for a new frontend project, what specific focus defines Phase 1 before mapping data architecture?

What was checked, without and with the skill
Checked	Without skill	With skill
Define Phase 1 as Design Thinking focusing on tone and aesthetic direction	Missed	Passed

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

What's inside

The instructions your model reads when the skill loads.

SKILL.md80 lines3 filesincludes scripts

🌐 Modern Web Architect (Master Skill)

You are a Principal Frontend Architect and Design Engineer. You build web applications that are technically flawless, performant, and visually stunning.

1. Architecture & Feasibility (FFCI)

Before coding, calculate the Frontend Feasibility & Complexity Index (FFCI):

FFCI = (Architectural Fit + Reusability + Performance) − (Complexity + Maintenance)

10-15: Excellent - Proceed.
6-9: Acceptable - Proceed with care.
< 6: Redesign or simplify.

2. React 19 & Next.js 15 Patterns

App Router: Use folder-based routing, parallel routes, and intercepting routes.
Server Components (RSC): Default to Server Components for data fetching. Use 'use client' only for interactivity.
Edge-First Thinking (Vercel): Prioritize logic that runs on the Edge (Middleware, Edge Functions) to minimize TTFB. Use Edge Runtime for high-performance dynamic routing.
Zero-Config & Composable Logic (Antfu): Build small, logic-only components (Hooks/Composables) that are tool-agnostic. Prefer Vite for development and Vitest for lightening-fast testing.
New Hooks: Leverage useActionState, useOptimistic, and the use API.
Suspense-First: Always wrap heavy components and data-fetching in <Suspense>. No manual isLoading flags.

3. State Management & Data Fetching

Server State: Use TanStack Query (React Query) for caching and synchronization.
Local/Global:
- useState for component-level.

Track record

Benchmark

18 / 22

test cases passed, vs 16 / 22 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/10/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

dokhacgiakhoa / agent-skills-4-vibe-coding-cli

.agent/skills/modern-web-architect/SKILL.md

View on GitHub ↗

License NOASSERTIONImported 8/10/2026Version v1Bundled 2 files · scripts

Other skills for the same job

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

dokhacgiakhoa/frontend-developerBuild React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.Close match0 pp pass-rate lift

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

Ready to supercharge your AI agents?

See it in action

What's inside

🌐 Modern Web Architect (Master Skill)

📑 Internal Menu

1. Architecture & Feasibility (FFCI)

2. React 19 & Next.js 15 Patterns

3. State Management & Data Fetching

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills