What a Front-End Skill Should Contain

A React-focused skill should describe how architecture is created.

For example:

Before generating code:

1. Identify the business domain.
2. Identify the subdomain.
3. Determine required models.
4. Determine required services.
5. Determine required state management.
6. Determine required APIs.
7. Determine reusable UI elements.
8. Generate structure with Atomic Bomb.
9. Implement generated files.
10. Generate tests and stories.

Notice that most of these steps occur before writing code.

That is intentional.

Skills should primarily describe architectural decision-making.

---

Mini Exercise

Draft a front-end skill for one feature in your application.

Make sure it tells the AI what to decide before code generation starts.

Example

For reporting features:
1. Identify the reporting domain and subdomain.
2. Define the required model, service, state, and API modules.
3. Determine which UI parts are reusable across reports.
4. Generate the structure before writing implementation code.
5. Add tests for the generated feature modules.