Ready to supercharge your AI agents?

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

Frontend Development Guidelines · aiskillstore | DecimalAI

frontendby aiskillstore

Frontend Development Guidelines

aiskillstore/frontend-dev-guidelines

Source aiskillstore/marketplace ↗License Not recorded

Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.

SkillScore91Maintained

Automatic

Frontend / UI pack

Last verified 8/27/2026

What it changes

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

Without skill73%

With skill91%

Checks it passed that the model alone missed

The mutation handler invokes revalidatePath.
The mutation module contains the 'use server' directive.
The code imports createClient from `@/lib/supabase/client`.

and 2 more in the full report

4 fixed16 passed either way2 still failing0 broke

Pass-rate lift: +18 pp
Tokens: +104%
Agent turns: 0%
Response time: +4%

Model gemini-3.6-flashMeasured 8/27/2026v320 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/aiskillstore-frontend-dev-guidelines/SKILL.md https://app.decimal.ai/s/aiskillstore-frontend-dev-guidelines/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add aiskillstore-frontend-dev-guidelines, 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/aiskillstore-frontend-dev-guidelines/ and pins it in .decimal/skills.lock

decimalai skills add aiskillstore-frontend-dev-guidelines

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

curl -fsSL --create-dirs -o .claude/skills/aiskillstore-frontend-dev-guidelines/SKILL.md https://app.decimal.ai/s/aiskillstore-frontend-dev-guidelines/SKILL.md

Raw file: /s/aiskillstore-frontend-dev-guidelines/SKILL.md ↗ · machine-readable summary at /s/aiskillstore-frontend-dev-guidelines.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

Please create a TypeScript form component for creating a new blog post. The component needs client-side field validation for title and content, UI input controls, and backend mutation logic to insert the record and refresh the page data.

What was checked, without and with the skill
Checked	Without skill	With skill
The component imports UI controls from `@/components/ui/input`.	Missed	Passed
The form implementation uses zodResolver for field validation.	Passed	Passed
The mutation handler uses revalidatePath to refresh cached page data.	Passed	Passed

case-02 · gemini-3.6-flash · 8/27/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md438 linessingle file

📋 OPINIONATED SCAFFOLD: Modern Next.js + React 19 + shadcn/ui stack

Default Stack:

Framework: Next.js 14+ (App Router)

UI Library: React 19

Components: shadcn/ui (Radix primitives)

Styling: Tailwind CSS

Forms: React Hook Form + Zod validation

State: React Context + TanStack Query for server state

Data Fetching: Server Components, Server Actions, TanStack Query

Language: TypeScript

Deployment: Vercel

To customize: Run /customize-scaffold frontend or use the scaffold-customizer agent to adapt for Vue, Angular, Svelte, vanilla React, or other frameworks/UI libraries.

Frontend Development Guidelines

Purpose

Modern frontend development with Next.js 14+ App Router, React 19, Server Components, and shadcn/ui. Focus on performance, type safety, and excellent UX with Supabase integration.

When to Use This Skill

Creating pages with App Router
Building Server/Client Components
Implementing Server Actions
Adding shadcn/ui components
Styling with Tailwind CSS
Data fetching with Supabase
Forms with React Hook Form + Zod
Performance optimization
TypeScript patterns

Quick Start

New Page Checklist

Track record

Benchmark

20 / 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 v5 — 8/26/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

aiskillstore / marketplace

skills/0chan-smc/frontend-dev-guidelines/SKILL.md

View on GitHub ↗

Imported 8/26/2026Version v3

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

Frontend Development Guidelines

Purpose

When to Use This Skill

Quick Start

New Page Checklist

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills