Agential Skill
A cross-platform skill that makes AI coding agents generate minimal, editorial-grade frontend UI instead of generic SaaS templates.
Install
npx agential-skill initclaude mcp add agential-skill -- npx agential-skill init{
"mcpServers": {
"agential-skill": {
"command": "npx",
"args": [
"agential-skill",
"init"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →Agential Skill
Autonomous Frontend Architecture & Editorial Output Design Engine for Coding Assistants
Specialized for Claude Code · Google Antigravity · VS Code (GitHub Copilot)
Quickstart
Run one command in the root of your project:
npx agential-skill init
The installer adds the canonical skill and platform adapters to the current project.
CLI Commands
| Command | Description |
|---|---|
npx agential-skill init |
Launch the interactive setup wizard |
npx agential-skill init -y |
Install all supported adapters without prompts |
npx agential-skill add react-nextjs |
Add React / Next.js implementation guidance |
npx agential-skill add vue-nuxt |
Add Vue / Nuxt implementation guidance |
npx agential-skill prompt |
View the standalone system prompt |
npx agential-skill --help |
View CLI options |
What This Does
AI coding models often generate generic SaaS UI: soft cards, shadows, glass panels, gradient buttons, dashboard widget piles, and long filler copy. Agential Skill replaces those defaults with a self-contained editorial output system.
The system produces:
- Image-first full-bleed planes, split stages, title/image plates, and visible 1px construction grids.
- Oversized neutral grotesque typography paired with small mono utility labels and short copy.
- Hard-edged rectangular framing, with no soft ornamental geometry.
- Black, white, charcoal, cream, and selective vermilion/red/orange imagery.
- No cards, bento, shadows, glass, blur, decorative gradients, equal feature grids, or generic SaaS templates.
- Real interaction state, WCAG 2.1 AA semantics, square focus outlines, reduced-motion support, and post-edit validation.
The Five Pillars
- Memory — Read
context.mdfirst and persist visual decisions and milestones. - Editorial Output — Make the dominant image/type composition, hairline structure, sparse metadata, and minimal pacing unmistakable.
- System Discipline — Use the same output language across sites, apps, portfolios, and framework presets.
- Incremental Delivery — Deliver complete cohesive chunks rather than decorative fragments.
- Post-Edit Review — Inspect diffs and run available validation after every change.
Design Specification
DESIGN.md contains the machine-readable token contract. SKILL.md is the complete specification. AGENTS.md is the compact operational rule set.
Supported Platforms
| Platform | File |
|---|---|
| Claude Code | CLAUDE.md |
| Google Antigravity | AGENTS.md |
| VS Code / GitHub Copilot | .github/copilot-instructions.md |
| Cursor | .cursor/rules/agential-skill.mdc |
| Windsurf | .windsurfrules |
| Web LLMs | adapters/system-prompt/prompt.md |
Repository Structure
agential-skill/
├── SKILL.md
├── AGENTS.md
├── DESIGN.md
├── context.md
├── presets/
├── references/
├── adapters/
├── .cursor/rules/
├── bin/cli.js
└── .github/workflows/
Author and License
Created by Talha Irfan (@talhairfandev). Licensed under MIT.
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.