skills.rest
avgarcia
avgarciaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-feature-dev

Scaffold Angular frontend features with standalone components, Signals, lazy loading, and Jest tests.

Updated May 15, 2026
Search Tags:#testing#frontend#angular#scaffolding#signals#lazy loading#standalone components
One-click install
npx skills add https://github.com/avgarcia/runcriticon --skill frontend-feature-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-feature-dev
Source: https://github.com/avgarcia/runcriticon/tree/main/.claude/skills/frontend-feature-dev
Command: npx skills add https://github.com/avgarcia/runcriticon --skill frontend-feature-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes the uncertainty and repetitive setup work involved in creating new Angular frontend features by enforcing the Runcriticon architecture, conventions, and quality requirements from the start.

Core Features & Use Cases

  • Angular Feature Scaffolding: Generates standalone OnPush components, services, routes, styles, and Jest tests following the project's frontend structure.
  • Architecture Compliance: Applies Signals, lazy loading, Angular Material, OpenAPI client usage, accessibility practices, and domain naming conventions.
  • Use Case: Create a new club management, planning, identity, or health feature in the Runcriticon frontend while ensuring it aligns with approved ADR decisions and testing expectations.

Quick Start

Use the frontend-feature-dev skill to scaffold a new Angular feature for the grupos area with the required components, routing, and tests.

Frequently Asked Questions about frontend-feature-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold Angular features using standalone components and Signals?▼

Scaffold Angular features by generating standalone OnPush components, services, and routes configured with Signals for state management, ensuring alignment with established project architecture and frontend conventions.

What is the best way to set up lazy loading for new Angular feature routes?▼

Set up lazy loading by configuring new Angular feature routes during the scaffolding process, automatically applying the project's routing conventions to ensure modular and performance-optimized bundle delivery.

Can I generate Jest and Playwright tests when creating new Angular screens?▼

Yes, generating new Angular screens includes creating Jest unit tests and Playwright end-to-end tests out of the box, while also integrating axe-core to enforce accessibility requirements from the start.

Does this Angular scaffolding process enforce bundle budget constraints?▼

Yes, the Angular scaffolding process explicitly enforces bundle budget constraints alongside OpenAPI client usage and Angular Material integration to maintain application performance and architectural compliance.

How do I add a new feature to the Runcriticon Angular frontend without breaking architecture rules?▼

Add new features by scaffolding components, services, and routing that automatically satisfy standalone component, Signals, lazy loading, and domain naming conventions dictated by approved ADR decisions.

Related Skills

Explore More Software Engineering Skills→
bricerisingbricerising
7

spec

Define service specs with acceptance criteria and decision records before coding.

Community
Advanced
leonanpereirapintoleonanpereirapinto
1

a11y-testing

Automate WCAG accessibility checks with jest-axe and Playwright axe-core.

Community
Advanced
zagarlucaszagarlucas

openapi-spec-writer

Generate OpenAPI 3.0/3.1 specifications for REST APIs with reusable components.

Community
Advanced
oguzhan18oguzhan18
6

angular-schematics

Generate Angular schematics and custom generators for code scaffolding.

Community
Intermediate