skills.rest
Briian3306
Briian3306COMMUNITY
Explore all skills by this author →
GitHub

peajes-wizard-tablas

Implements Angular 19 wizard and catalog tables for the Peajes toll module.

Updated Jan 31, 2023
Search Tags:#typescript#frontend#angular#wizard#excel upload#catalog tables#toll module
One-click install
npx skills add https://github.com/Briian3306/Transporte --skill peajes-wizard-tablas-briian3306
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: peajes-wizard-tablas
Source: https://github.com/Briian3306/Transporte/tree/main/ibarra-app/.agents/skills/peajes-wizard-tablas
Command: npx skills add https://github.com/Briian3306/Transporte --skill peajes-wizard-tablas-briian3306

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building the Peajes (toll) module frontend requires following strict repo conventions—standalone Angular 19 components, custom CSS/SCSS, Font Awesome, typed contracts from agent 00—while staying inside a narrow ownership scope. This Skill guides the agent to implement the Excel upload wizard and catalog tables without violating module boundaries or introducing a foreign design system. ## Core Features & Use Cases - Excel Upload Wizard: Implements the multi-step wizard (upload .xlsx, 10-row preview, column mapping, invoice, validation) under src/app/components/peajes/wizard/. - Catalog Tables: Builds CRUD-style tables for peajes, estaciones, patentes, and pases under catalogos/ following the repo's card/button/loading-state UI pattern. - Contract-First Development: Consumes typed interfaces from agent 00's models and uses typed mocks until agent 01 delivers real Supabase services. - Use Case: Implement feature F02-03 (column mapping step) by importing PasadaColumnKey from the models folder, rendering the mapping UI with existing .btn styles, and verifying with ng test. ## Quick Start Implement the F02 wizard step for Excel preview in the Peajes module using the existing standalone Angular component pattern and typed mocks from the agent 00 contracts.

Frequently Asked Questions about peajes-wizard-tablas

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

FAQPage Schema
How do I build an Excel upload wizard in Angular?▼

Build a multi-step standalone component flow: file input restricted to .xlsx, a preview step capped at 10 rows, a column-mapping step bound to standard column keys, and a validation step showing row, column, value, and reason for each error.

How do I use typed mocks before backend services are ready?▼

Create mocks with RxJS of(...) or arrays that implement the service interfaces defined in the models contracts folder. This lets the UI compile and test independently, and real services can replace mocks without changing components.

Can I use PrimeNG or Angular Material in this Angular project?▼

No. This repo uses custom module-level CSS/SCSS plus shared utilities in src/styles.css, with Font Awesome icons. Follow the existing card, header, and .btn button patterns from modules like Stock or Incidentes instead of adding a component library.

Why should a toll pass record reference a station instead of a toll?▼

A Pasada references an Estacion, and the Peaje is derived through estacion.peaje_id. Storing peaje_id directly on the pass would duplicate the relationship and risk inconsistency when stations are reassigned between tolls.

What are the limitations of this frontend-only workflow?▼

The frontend cannot apply SQL migrations or call real Supabase services; those belong to the backend agent. It also cannot edit the shared model contracts or reuse checklist templates, and route extensions require a handoff to the routing owner.

Related Skills

Explore More Software Engineering Skills→
AsmayaseenAsmayaseen
2

Frontend TypeScript Types Skill

Define frontend TypeScript types from backend contracts with naming conventions.

Community
Basic
nopkhunnopkhun

backend-engineer

Integrate frontend applications with Supabase for backend services.

Community
Advanced
Globussoft-TechnologiesGlobussoft-Technologies
2

medcore-route-test

Generate deterministic Vitest unit tests for MedCore Express route handlers.

Official
Advanced
kizzzkizzz

angular-best-practices-primeng

Enforce PrimeNG best practices in Angular projects with standalone components and lazy loading.

Community
Intermediate