L-X-T
- 31 skills
- 0 followers
- 10 hours ago last updated
- ▌ Test Driven Development · l-x-t bundleDrive implementation from a failing test first – red, green, refactor – so every line of production code is demanded by a test you watched fail. Use when implementing a feature or bugfix before writing implementation code, or when the user mentions TDD, red-green, "write the tests first", or "test-drive this".
- ▌ Update Skills Directory · l-x-tAudit .agents/skills so every skill has valid frontmatter, a lean SKILL.md, flat support folders, and a root 02-SKILLS.md link. Use when the user adds, renames, removes, or restructures a skill, or asks to update the skills index/directory. Do not use it to create per-skill README files.
- ▌ Unslop · l-x-tEdit prose to remove AI-writing tells and improve clarity. Use when writing or revising prose (docs, READMEs, commit messages, blog posts, UI copy), or when the user says text sounds like AI, or asks to unslop, de-AI, or humanize it.
- ▌ Spartan · l-x-t bundleManages spartan/ui, the Angular UI library - adding, composing, fixing, debugging, and styling UI with the Brain (headless primitives) and Helm (styled) layers. Provides project context, component APIs, and usage examples. Applies when working with spartan/ui, @spartan-ng/brain, @spartan-ng/helm, the @spartan-ng/cli generators, or any Angular project with a components.json file. Also triggers for "spartan init", "add a spartan component", or "set up spartan/ui".
- ▌ Grill Me · l-x-t bundleInterview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when the user wants to stress-test a plan, get grilled on their design, or mentions "grill me". For a grilling anchored to the project's domain model and style guides use grill-with-style instead.
- ▌ Handover · l-x-tCompact the current conversation into a handover document for another agent to pick up. Use when the user wants to hand work over to a new session, says "handover", "hand off", or asks to summarise the session for the next agent.
- ▌ Ng Forms · l-x-t bundleBuild signal-based forms in Angular v22+ using the Signal Forms API (public API since v22, imported from @angular/forms/signals). Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Don't use for template-driven forms without signals or third-party form libraries like Formly or ngx-formly.
- ▌ Ng Migrate · l-x-t bundleRun Angular package updates and official `ng generate @angular/core:*` migration schematics to modernize Angular code – standalone, control flow, `inject()`, signal inputs/outputs/queries, lazy routes, self-closing tags, ngClass/ngStyle, CommonModule, RouterTestingModule, unused-import cleanup. Use when the user wants to update Angular, run `ng update`, migrate, modernize, or convert Angular code at any scope from a single component or service up to a library or whole application.
- ▌ Ng Styling · l-x-t bundleAudit Angular styling against the repo style guide, the "Angular Styling" workshop deck, and angular.dev, then fix findings on approval. Use when reviewing, checking, or cleaning up Angular styling / CSS / SCSS: prefer `[class.x]` / `[style.x]` over `ngClass` / `ngStyle`, View Encapsulation (Emulated / ShadowDom / None), (S)CSS architecture, design tokens via CSS custom properties and `:host` knobs, BEM with a project prefix, nesting depth, and removing `!important`, `::ng-deep`, `float`, inline styles, and leaked framework classes (ag-grid `.ag-*`, ng-select `.ng-*`, spartan). Also advises on SSR-safe DOM access, NG17 view transitions, design systems, Tailwind, and Stylelint. Produces a provenance-tagged, severity-ranked report before changing anything; fixes on approval in verified batches and never commits.
- ▌ Ng Testing · l-x-t bundleWrite Vitest unit and component tests for Angular – TestBed for standalone + zoneless components, signal/computed assertions, DI and HttpClient mocking, and CDK component harnesses. Use when the user wants to unit-test or spec a component, service, pipe, signal, or computed, mentions Vitest, TestBed, HttpTestingController, or component harnesses, or says "test this component/service". Not for browser end-to-end tests – use create-e2e-tests.
- ▌ Code Review · l-x-t bundleCode review changed, staged, last-commit, and merge or PR work against requirements and the repository style guide. Use when reviewing current work, staged changes, the last commit, a branch, a merge, or a pull request. For a whole-codebase style audit use ng-review-style-guide instead.
- ▌ Ng Refactor · l-x-t bundleRefactor a dusty / legacy Angular component into a small, modern, signal-based one using a repeatable 7-step blueprint – Analyse → Declutter → Update → Modernize → Type → Refactor → Review – while delegating Angular updates and official migration schematics to ng-migrate. Use when the user wants to refactor, modernize, clean up, tame, or "de-dust" a large, messy, or legacy Angular component, service, directive, or feature.
- ▌ Ng Security · l-x-tHarden Angular applications against common web vulnerabilities. Use when reviewing or improving app security, preventing XSS, configuring Content Security Policy (CSP) or Trusted Types, working with sanitization / DomSanitizer / bypassSecurityTrust, securing HttpClient (XSRF/CSRF, XSSI), auth and token storage, SSR/SSRF (allowedHosts), or keeping dependencies patched.
- ▌ Ng Prototype · l-x-t bundleBuild a throwaway Angular prototype to flesh out a design before committing – either a runnable terminal app for state/business-logic questions, or several radically different UI variations on one route, switchable from a floating bar. Use when the user wants to prototype an Angular feature, mock up a screen, sanity-check a data model or state machine, explore design options, or says "prototype this", "try a few designs", or "let me play with it".
- ▌ Brainstorming · l-x-t bundleExplores user intent and design through a feasibility spike, a short design, or a full specification. Use when the user has an idea but no concrete plan yet, wants to brainstorm, or asks for a design-first session – not for small, well-specified tasks.
- ▌ Update Skills · l-x-t bundleCheck vendored skills for upstream updates and selectively apply requested updates while preserving local adaptations and provenance. Use when the user asks whether third-party skills are outdated, wants an upstream comparison, or asks to refresh installed skill copies. For directory structure and catalogue maintenance alone, use update-skills-directory.
- ▌ Create A Skill · l-x-t bundleCreate, edit, and improve agent skills with the right invocation, information hierarchy, leading words, and pruning so each skill runs predictably. Use when the user wants to create, write, edit, refactor, or review a skill, or asks what makes a skill good.
- ▌ Implement Plan · l-x-t bundleExecute an approved implementation plan in small working slices, verifying each slice and reconciling the result with the plan. Use when the user asks to implement a written plan, execute approved tickets, or continue an agreed implementation. Do not use for brainstorming, drafting a plan, review-only requests, or a small edit that needs no plan.
- ▌ Ng Data Access · l-x-t bundleBuild the typed server-communication layer in Angular v22+ – fetch data through httpResource/resource/rxResource backed by HttpClient, with functional interceptors, loading/error/reload state, and SSR-safe transfer caching. Use when fetching data, writing an API service, wiring HttpClient, choosing httpResource vs resource vs rxResource, adding an interceptor, or surfacing loading/error/reload state. The project's TypeScript style guide prefers resource()/rxResource()/httpResource() over "RxJS + async pipe" for reads.
- ▌ Ng Performance · l-x-tOptimize the performance of an Angular (v17+) application – both initial load (bundle size, lazy loading, deferrable views, images, SSR/SSG/hydration) and runtime (change detection, OnPush, zoneless, slow templates, large lists, RxJS). Use when the user wants to make an Angular app load faster, fix slow rendering or janky change detection, reduce bundle size, improve Core Web Vitals / Lighthouse scores, or asks for a performance review/audit. Covers the angular.dev performance best practices.
- ▌ Diagnosing Bugs · l-x-t bundleFeedback-loop-first diagnosis discipline for hard bugs and performance regressions. Use when debugging, hunting a bug's root cause, chasing a flaky or failing test, or tracking down a regression – the user says "diagnose"/"debug this" or reports something broken, throwing, failing, or slow.
- ▌ Frontend Design · l-x-t bundleCreate distinctive, intentional frontend designs through aesthetic direction, typography, layout, and interface copy. Use when building new UI, redesigning an existing screen, or asking for visual design guidance.
- ▌ Ng Signal Store · l-x-t bundleManage genuinely shared, multi-consumer state with @ngrx/signals SignalStore (withState / withComputed / withMethods / withEntities / rxMethod). Use when state must be shared across several components or routes and the user mentions state management, shared state, a store, NgRx, or SignalStore. Guard – prefer a local signal() / computed() or a signals-based service first; reach for a store only when state is truly shared. If @ngrx/signals is not in package.json, installation is a gated, explicit step.
- ▌ Create E2e Tests · l-x-t bundleCreate end-to-end (e2e) tests for an Angular component using Playwright or Cypress. Use when the user wants e2e or browser tests, a Cypress `.cy.ts` spec, a Playwright e2e `.spec.ts`, or mentions testing a component in a real browser. Detects the configured platform (asks only when both or neither are set up), scaffolds it when missing, then writes and runs the spec. Not for unit or TestBed component tests – use ng-testing for those.
- ▌ Grill With Style · l-x-tGrilling session that challenges your plan against the code's actual domain model and project style guide, and sharpens terminology. Use when the user wants to stress-test a plan against their project's language and style guide. For a plain design grilling without that lens use grill-me instead.
- ▌ Ng Accessibility · l-x-tMake an Angular (v17+) application accessible – semantic HTML, keyboard & focus, color contrast, text alternatives, accessible forms & tables, plus Angular-specific tooling (ARIA attribute bindings, CDK a11y LiveAnnouncer/cdkTrapFocus, Angular Aria & Material, accessible custom components, router titles/active-links/focus management). Use when the user wants to improve accessibility/a11y, meet WCAG AA, fix screen-reader or keyboard issues, pass axe/Lighthouse a11y audits, or asks for an accessibility review. Covers the angular.dev a11y best practices.
- ▌ Angular Developer · l-x-t bundleGenerates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices on reactivity (signals, linkedSignal, resource, httpResource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, naming conventions, or CLI tooling.
- ▌ Git Stack Rewrite · l-x-t bundleFold staged changes or an existing commit into an older Git commit and rebase every affected dependent branch stack onto the rewritten commit. Use when the user says prompts like "use git stack rewrite to squash commit [source] into [target]", or asks to squash, fixup, amend, or move staged changes back into an earlier commit and then rebase branches that were on top of it.
- ▌ Ng Verify Feature · l-x-t bundleVerify a running Angular feature against acceptance criteria using the browser, and report observed behavior with reproduction evidence. Use when the user asks to verify a delivered feature, check an Angular user flow, or perform scoped exploratory acceptance testing. Do not use for source-only code review, writing e2e specs, or a general explanation of browser testing.
- ▌ Ng Review Style Guide · l-x-tAudit the whole Angular codebase against the project style guide (all of style-guide/, auto-selected by file type) and report severity-ranked conformance findings, then drill in and fix on approval. Use when the user wants a full-codebase style-guide review, a conformance audit, to check the existing code against the style guide, or to find where the codebase drifted from the guide – as opposed to reviewing a diff (use code-review) or only SCSS/styling (use ng-styling).
- ▌ Ng Review Architecture · l-x-t bundleReview the architecture of an Angular project against domain-driven design and module depth – bounded contexts, library categories (feature/ui/data-access/util/domain/api/shell), domain isolation, access restrictions, smart/dumb components, and deep vs shallow modules. Produces a structured review, then drills into chosen findings. Use when the user wants an Angular architecture review, to assess domain structure or boundaries, find refactoring or deepening opportunities, or check DDD/Nx layering and dependency rules.