跪拜 Guibai
← All articles
Agent

The Agent Skills Stack That Replaces Vibe Coding with Structured Engineering

By 为你学会写情书 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The shift from vibe coding to specification-driven workflows changes what an AI coding agent can reliably produce. A CLAUDE.md plus a small set of workflow Skills gives a team repeatable, documented output instead of one-shot prompts that leave no trace of why decisions were made.

Summary

Specification-driven development (SSD) is moving AI coding from free-form prompting to a structured pipeline of spec, plan, and implementation. CLAUDE.md provides always-on project conventions, while Skills—on-demand instruction files stored as SKILL.md—add specific capabilities like brainstorming, test-driven development, and code review. The two mechanisms are complementary: one sets the rules, the other provides the tools.

The community's most mature engineering workflow framework is Superpowers, which chains six Skills from brainstorming through verification and can run sub-agents in parallel. Paired with tlc-spec-driven, which treats requirements and design documents as first-class artifacts, the combination covers both how to write and what to write. A curated list rounds up frontend design Skills that fight generic AI-generated UI, 817 cybersecurity Skills mapped to MITRE ATT&CK and NIST frameworks, and 138 scientific research Skills spanning genomics and drug discovery.

For Next.js backend work, the recommended stack is lean: a CLAUDE.md that encodes the tech stack, project structure, and coding standards, plus Superpowers and spec-driven for the workflow. Input validation gets a dedicated Zod Skill, and the Vercel AI SDK handles LLM integration when needed. The principle is convention over accumulation—a well-written CLAUDE.md paired with a few workflow Skills outperforms a bloated collection of niche tools.

Takeaways
CLAUDE.md is a project-root Markdown file that loads automatically at the start of every Claude Code session and persists through context compression; it encodes always-on conventions like tech stack, code style, and directory structure.
The .claude/ directory holds on-demand Skills and custom slash commands—rules versus capabilities, not interchangeable.
Superpowers breaks software engineering into six chained Skills (brainstorming, writing-plans, TDD, debugging, code-review, verification) and can run sub-agents in parallel on complex tasks.
tlc-spec-driven enforces a four-phase pipeline—Specify, Design, Tasks, Implement—and produces persistent Markdown artifacts (spec.md, design.md, tasks.md) that make work interruptible, traceable, and collaborative.
frontend-design (Anthropic official) forces bold typography and unconventional layouts to break AI's tendency toward generic UI.
Anthropic Cybersecurity Skills packs 817 skills mapped to MITRE ATT&CK, NIST CSF 2.0, D3FEND, and three other frameworks; an agent can execute a detection task like 'check lateral movement T1021.001 over 7 days' by loading the relevant SKILL.md.
Scientific Agent Skills connects 138 research skills across 17 domains to 100+ databases and 70+ Python packages including RDKit, Scanpy, and BioPython.
All Skills follow a universal SKILL.md standard, so a single file works across Claude Code, Cursor, Codex, and Gemini CLI.
For Next.js backends, the effective stack is CLAUDE.md (tech stack and structure conventions) plus Superpowers, spec-driven, and a Zod Skill—not a large collection of niche tools.
Conclusions

The CLAUDE.md versus .claude/ distinction is the most common point of confusion for newcomers, and getting it wrong means either missing always-on conventions or misunderstanding when Skills actually load.

Superpowers and spec-driven solve orthogonal problems—engineering method versus requirements-to-tasks translation—which is why they compose well rather than compete.

The SKILL.md standard is quietly becoming a cross-tool interchange format; a Skill written once runs on four major coding agents, which lowers the cost of building and sharing agent workflows.

The Next.js recommendation to lean on CLAUDE.md conventions rather than piling on Skills reflects a broader principle: agent effectiveness comes from clear constraints, not from installing every available capability.

Concepts & terms
SSD (Specification-Driven Development)
A structured AI coding workflow that replaces free-form prompting with a fixed pipeline: Specification → Plan → Code. The agent produces and references persistent documents at each stage rather than relying on conversation memory alone.
CLAUDE.md
A Markdown file placed in the project root that Claude Code loads automatically at the start of every session. It persists through context compression and encodes always-on project conventions like tech stack, coding standards, and directory structure.
SKILL.md
A universal standard for defining agent Skills as Markdown instruction files. Each Skill lives in its own folder under .claude/skills/ or .cursor/skills/ and is loaded on demand. The same SKILL.md file works across Claude Code, Cursor, Codex, and Gemini CLI.
Sub-Agent parallelism
A Superpowers feature that automatically decomposes a complex task and launches multiple sub-agents simultaneously, each advancing a different Skill phase (e.g., brainstorming and code-review in parallel) to reduce total development time.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗