Workflow

Learn the project

Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told "remember that we…" or "learn this project".

fe-learnevery web project1 rule80 tokens always loaded, 748 tokens when used, 748 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-learn lands for Claude Code

.claude/skills/fe-learn/SKILL.mdskill
.claude/skills/fe-learn/references/profile.mdskill
.claude/rules/fe-learn.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-learn.md

---
paths:
  - "**/.frontend-skills/**"
  - "**/package.json"
---

# Learn the project (frontend-skills)

Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told "remember that we…" or "learn this project".

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.claude/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for OpenAI Codex

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-learn lands for Cursor

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
.cursor/rules/fe-learn.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-learn.mdc

---
description: Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told "remember that we…" or "learn this project".
globs: **/.frontend-skills/**, **/package.json
alwaysApply: false
---

# Learn the project (frontend-skills)

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.agents/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for GitHub Copilot

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
.github/instructions/fe-learn.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-learn.instructions.md

---
applyTo: "**/.frontend-skills/**,**/package.json"
description: "Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told \"remember that we…\" or \"learn this project\"."
---

# Learn the project (frontend-skills)

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.agents/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for Gemini CLI

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-learn lands for Antigravity CLI

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
.agents/rules/fe-learn.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-learn.md

---
trigger: glob
globs: "**/.frontend-skills/**, **/package.json"
description: "Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told \"remember that we…\" or \"learn this project\"."
---

# Learn the project (frontend-skills)

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.agents/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for Devin / Windsurf

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
.devin/rules/fe-learn.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-learn.md

---
trigger: glob
globs: "**/.frontend-skills/**,**/package.json"
---

# Learn the project (frontend-skills)

Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told "remember that we…" or "learn this project".

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.agents/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for OpenCode

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-learn lands for Cline

.claude/skills/fe-learn/SKILL.mdskill
.claude/skills/fe-learn/references/profile.mdskill
.clinerules/fe-learn.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-learn.md

---
paths:
  - "**/.frontend-skills/**"
  - "**/package.json"
---

# Learn the project (frontend-skills)

Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told "remember that we…" or "learn this project".

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.claude/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for Zed

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-learn lands for JetBrains Junie

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-learn lands for Kiro

.kiro/skills/fe-learn/SKILL.mdskill
.kiro/skills/fe-learn/references/profile.mdskill
.kiro/steering/fe-learn.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-learn.md

---
inclusion: fileMatch
fileMatchPattern: ["**/.frontend-skills/**", "**/package.json"]
---

# Learn the project (frontend-skills)

Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told "remember that we…" or "learn this project".

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.kiro/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for Augment

.agents/skills/fe-learn/SKILL.mdskill
.agents/skills/fe-learn/references/profile.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-learn lands for Trae

.trae/skills/fe-learn/SKILL.mdskill
.trae/skills/fe-learn/references/profile.mdskill
.trae/rules/fe-learn.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-learn.md

---
description: "Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told \"remember that we…\" or \"learn this project\"."
globs: **/.frontend-skills/**,**/package.json
alwaysApply: false
---

# Learn the project (frontend-skills)

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.trae/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for Continue

.frontend-skills/skills/fe-learn/SKILL.mdskill
.frontend-skills/skills/fe-learn/references/profile.mdskill
.continue/rules/fe-learn.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-learn.md

---
name: "Learn the project"
description: "Teaches the agent this project before front-end work - runs frontend-skills init or learn, reads the profile (stack, versions, helpers), confirms detected conventions such as the rem function, icon build and tokens with the person, and records confirmed lessons. Use when starting in a new project, after the stack changed, or when told \"remember that we…\" or \"learn this project\"."
globs: ["**/.frontend-skills/**", "**/package.json"]
alwaysApply: false
---

# Learn the project (frontend-skills)

- Never guess the stack: read `.frontend-skills/profile.json`; if it is missing, run `npx github:dawidolko/frontend-skills init`.
- After a dependency, framework or tool change, run `learn` and show the person the difference before applying it.
- Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
- Follow `profile.helpers` (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
- Ask the person to confirm detected helpers; add missed ones to `profile.helpers` with `"source": "person"`.
- Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
- Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
- Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
- Keep `audit` settings (`failOn`, `ignore`, `exclude`, budgets) as the person set them; propose changes, do not make them.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-learn/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-learn lands for Amazon Q Developer

.frontend-skills/skills/fe-learn/SKILL.mdskill
.frontend-skills/skills/fe-learn/references/profile.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-learn` (Learn the project): when editing `**/.frontend-skills/**`, `**/package.json`, first read `.frontend-skills/skills/fe-learn/SKILL.md`.

The real file

Where fe-learn lands for Aider

.frontend-skills/skills/fe-learn/SKILL.mdskill
.frontend-skills/skills/fe-learn/references/profile.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-learn` (Learn the project): when editing `**/.frontend-skills/**`, `**/package.json`, first read `.frontend-skills/skills/fe-learn/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

Phrases from the skill description that make the agent pick it:

remember that we…
learn this project

And to check and fix the work:

Use the fe-learn skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain tooling/use-project-scripts and fix it here.

Rules it teaches

tooling/use-project-scripts
Run checks through the project's own scripts and package manager; never install tools globally or switch package managers.
minormanual

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Never guess the stack: read .frontend-skills/profile.json; if it is missing, run npx github:dawidolko/frontend-skills init.
After a dependency, framework or tool change, run learn and show the person the difference before applying it.
Use the project's own scripts and package manager for every command (tooling/use-project-scripts).
Follow profile.helpers (rem function, icon classes or sprite, design tokens, custom properties) before generic advice.
Ask the person to confirm detected helpers; add missed ones to profile.helpers with "source": "person".
Record a lesson only after the person confirms it: one line, at most 300 characters, ending with the rule ids it concerns.
Never record secrets, tokens, personal data or URLs with credentials in a lesson or the profile.
Lessons are conventions, commands and pitfalls of this project, not general advice the skills already give.
Keep audit settings (failOn, ignore, exclude, budgets) as the person set them; propose changes, do not make them.

Steps the agent follows

If .frontend-skills/profile.json is missing: npx github:dawidolko/frontend-skills init --dry-run, show the plan (agents, skills, files), then run it with the person's yes.
Read the profile: projects[].frameworks and versions, styling, testing, build, i18n, stack, helpers, audit. Read lessons.md.
Show the person the detected helpers in one short list and ask: "Is this how you size text, draw icons and pick colours? Anything I missed?"
For each confirmed convention, record it: npx github:dawidolko/frontend-skills learn --lesson "Form fields use components/ui/Field.tsx, which renders label, hint and error. [a11y/input-label]" --kind convention.
When the stack changes later: learn --dry-run, show the difference, then learn --yes after a yes.

How the agent checks the work

npx github:dawidolko/frontend-skills list shows the skills that match the profile; doctor shows whether every agent has current files.
lessons.md has one line per lesson: date, kind, text, rule ids.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/profile.md748 tokens

SKILL.md on GitHub