frontend-skills
A Claude Code plugin bundling four modern frontend coding-standards skills — JavaScript, CSS, HTML, and Angular. Once installed, Claude applies the relevant standard automatically whenever it writes, refactors, reviews, or audits code in that language. No slash command required; the skills trigger from task context (you can still invoke one by name if you want).
- Plugin name:
frontend-skills - Version:
1.0.0 - Marketplace:
frontend-skills-marketplace - Author: krabee (krabee@optimizasolutions.com)
What's inside
| Skill | Standard it enforces | Fires when you… |
|---|---|---|
| javascript-standards | Modern ES6+, functional patterns, Airbnb / Google JS Style Guides | write, refactor, debug, or modernize JavaScript (scripts, modules, Node handlers, component logic) |
| css-standards | CSS3 / SCSS — Grid & Flexbox, container queries, design tokens (custom properties), low-specificity BEM / CSS Modules | write, clean up, or organize styles; fix specificity / !important; convert float layouts; set up theming |
| html-standards | WHATWG HTML5 + WCAG 2.1 AA accessibility | write or audit markup; fix a11y issues; convert div-soup to semantic HTML; improve SEO semantics |
| angular-standards | Angular 17+ — standalone components, Signals, native control flow (@if/@for/@defer), functional inject() | write or modernize Angular components, directives, pipes, or services |
How the skills work together
The JS, CSS, and HTML skills are complementary layers — building a component or landing page can trigger several at once (markup + styling + behavior), which is intended.
For Angular, the angular-standards skill declares precedence over general JavaScript/TypeScript style: Angular's class-based components and services win where the two would differ, while non-conflicting JS clean-code rules (const/let, strict equality, async error handling) still apply on top.
Install
The plugin is distributed through its bundled marketplace. Point Claude Code at wherever you host this repo, then install:
# 1. Add the marketplace (choose the source that matches how you host it)
/plugin marketplace add your-org/frontend-skills-plugin # GitHub repo
# or a git URL: /plugin marketplace add https://git.example.com/frontend-skills-plugin.git
# or a local path: /plugin marketplace add ./frontend-skills-plugin
# 2. Install the plugin from that marketplace
/plugin install frontend-skills@frontend-skills-marketplace
Verify it loaded:
/plugin
You should see frontend-skills enabled with its four skills. That's it — start writing frontend code and the matching standard applies automatically.
Updating
Publish changes by pushing to the repo and bumping version in .claude-plugin/plugin.json. Teammates pull the update with:
/plugin marketplace update frontend-skills-marketplace
Repository layout
frontend-skills-plugin/
├── .claude-plugin/
│ ├── plugin.json # plugin manifest (name, version, description, author)
│ └── marketplace.json # marketplace catalog listing this plugin
└── skills/
├── angular-standards/SKILL.md
├── css-standards/SKILL.md
├── html-standards/SKILL.md
└── javascript-standards/SKILL.md
Contributing / validating
After editing any manifest or skill, validate before pushing:
claude plugin validate ./frontend-skills-plugin
To add a skill, drop a skills/<name>/SKILL.md (with name and description frontmatter) — it's auto-discovered, no manifest change needed.
Roadmap
- typescript-standards (v1.1) — general TypeScript discipline (typing, interfaces, generics,
strictmode) for non-Angular TS, which the current bundle doesn't cover.