Alfredo Perez

// Software engineer · Angular GDE48 posts

Software engineer who loves building great experiences, sharing what I learn, and making AI work for developers.

Read the blog

GitHub X LinkedIn

GDE

Angular

Google Developer Expert

Posts

Articles & build logs

Projects

Open-source tools

Talks & Videos

Talks, streams, shows

> Featured · Latest

Butai 舞台

An open-source platform for building AI-crafted slide decks, videos, and docs. A React deck engine, themeable copy-in kits, Claude Code skills, and a CLI.

Type: Project
Topic: AI Coding
Date: July 9, 2026

Read

01>AI Coding09 entries

Making AI genuinely useful in the day-to-day of writing software.

ProjectButai 舞台An open-source platform for building AI-crafted slide decks, videos, and docs. A React deck engine, themeable copy-in kits, Claude Code skills, and a CLI.July 9, 2026

ShowAI in the Trenches: Tools We Love and Lessons LearnedPanel on the AI coding tools we actually reach for, and what we learned shipping with them.April 3, 2026

ArticleAngular Best Practices for AIA curated rules package that teaches your AI coding agent how to write better Angular code. Works with Claude Code, Cursor, VS Code Copilot, and 30+ more agents.February 12, 2026

ArticleUniversal Knowledge Base for AICreate a shared knowledge base for AI tools that documents patterns once and works everywhere - Cursor, Claude Code, or any AI assistantOctober 2, 2025

ArticleCreate Reliable Unit Tests with Claude CodeStop AI from generating useless tests. Create testing guides that teach Claude Code your team's patterns for focused, behavior-driven testsSeptember 18, 2025

ShowCode Faster with AIPractical ways to move faster with AI coding tools, live on Angular Air.August 17, 2025

ArticleGenerating Your First Rules with Cursor for Your Angular ProjectLearn to create meta-rules that generate consistent Cursor AI rules for Angular using best practices and package.json dependenciesJune 23, 2025

ArticleCreate Cursor Rules for AngularLearn how to implement Cursor AI's rules system in Angular to enforce coding standards, maintain consistency, and enhance your team's workflowJune 16, 2025

ArticleFaster Development with JetBrains AIEnhance coding speed with JetBrains AI Assistant: intelligent code suggestions, automatic documentation, AI chat support, and code refactoringSeptember 5, 2024

02>Spec-Driven Development19 entries

Building SpecKit Companion in public — specs, plans, and shipping with AI.

ProjectSpecKit CompanionVS Code extension for spec-driven development. A GUI that watches your spec → plan → tasks → implement pipeline and lights up as you work.June 21, 2026

ProjectSpecKit ExtensionThe open-source spec-kit extension that powers the Companion — the templates, hooks, and SDD pipeline, on GitHub.June 20, 2026

ArticleThe SpecKit Companion Extension: Make spec-kit Visible, Right-Sized, and YoursThe spec-kit half of SpecKit Companion: it records your lifecycle so the sidebar lights up, fast-forwards small changes, and lets you reshape the pipeline.June 24, 2026

ArticleBuild Log 4 — Your Pipeline, as NodesSpecKit Companion's pipeline is now a list of nodes, not hardcoded steps. Three confusing toggles collapse into one picker, and the workflow finishes itself.June 21, 2026

ArticleBuild Log 3 — Turbo Mode and the Fast PathGiving spec-kit a leaner, faster shape without forking it: turbo mode, a fast-path that skips plan/tasks on small changes, and why it all shipped opt-in.June 13, 2026

LivestreamJueves de Quack con speckit-companionLive build session on the SpecKit Companion — spec-driven development in the open.June 13, 2026

ArticleBuild Log 2 — Capturing the Whole Lifecycle, and Shipping v1Build Log 2: full lifecycle capture, a derive-from-files fallback, and an eval that caught my state engine lying. Where the SpecKit Companion ships v1.June 8, 2026

ArticleBuild Log 1 — Proving the Riskiest AssumptionProving the riskiest assumption in my SDD rebuild: a spec-kit hook auto-fires, writes the state file, and the Companion GUI lights up. Plus the install gotcha.June 7, 2026

ArticleLayered Context FoundationSDD loads four layers of context automatically: principles, living specs, feature deltas, and ADRs, so your specs stop dying the moment a PR merges.June 7, 2026

ArticleSpecs That Move In Next to Your CodeHow I made SDD adoptable on a real, existing codebase: specs that live next to your code, and /sdd:init that drafts them from the code you already have.June 7, 2026

LivestreamJueves de QuackLive coding session — Jueves de Quack.May 29, 2026

ArticleBuild Log 0 — Kickoff: Rebuilding SDD in PublicI'm folding my SDD tool into spec-kit and rebuilding it in public as the SpecKit Companion. Here's the plan, the 8-step backlog, and how to follow along.May 26, 2026

ArticleWhat is SDD (and Why I Built It)What SDD is, why I built it, and how it differs from spec-kit. The origin story behind folding it back into spec-kit as the SpecKit Companion.May 25, 2026

ArticleBuild Your Own SDD WorkflowBuild a 4-step SDD workflow with SpecKit Companion: specify, plan, tasks, implement. Fast Mode for quick fixes, checkpoints before every PR.March 21, 2026

ArticleCustom Workflows in SpecKit CompanionPlug any SDD methodology into SpecKit Companion with a custom workflow. Demo with Gentle AI by Gentleman Programming.March 20, 2026

ArticleSpecKit CompanionSpecKit Companion brings spec-driven development into VS Code — browse specs, track workflow phases, review with inline comments, and manage AI configuration visually.March 19, 2026

Community TalkBuild Your Own Spec-Driven WorkflowOwn your AI coding workflow — steal the best ideas, make it yours.February 27, 2026

ArticleSpec-Driven Development: Stop Vibe CodingLearn how spec-driven development transforms AI-assisted coding from endless iterations to precise implementations. Stop hoping the AI understands your intent and start making it explicit with specifications that become living documentation.January 2, 2026

ShowClaude Code + Cursor: Spec-Driven DevelopmentSpec-driven development with Claude Code and Cursor, live on Angular Air.October 5, 2025

03>Dev Tools04 entries

Extensions and tooling that sharpen the developer experience.

ProjectAngular ToolbarA browser DevTools toolbar for Angular apps — toggle feature flags, mock data, and tweak state at runtime.January 19, 2026

ArticleGetting Started with Angular ToolbarLearn how to set up Angular Toolbar and configure Feature Flags, Permissions, and App Features to instantly test different scenarios in your Angular application without touching the database.January 19, 2026

ArticleIntroducing ngx-dev-toolbarA development toolbar for Angular that lets you toggle feature flags, permissions, and app settings on the fly—without backend changes or leaving your application.January 2, 2026

ArticleAchieving a better developer experience in your integration tests with StoryBook and CypressImprove developer experience using StoryBook, Cypress for efficient UI workflow, reusable commands, visual testing, and flaky test resolutionJune 13, 2023

04>State & NgRx15 entries

Managing state in Angular — NgRx, RxJS, and TanStack Query.

ArticleSkip Angular ResourceTanStack Query excels in Angular apps with powerful server state management and advanced features compared to Angular ResourceFebruary 13, 2025

TalkTanStack Query: The Last State Management You NeedWhy TanStack Query can replace most of your Angular state management.October 20, 2024

ArticleTanStack Query in AngularExplore how TanStack Query enhances Angular apps by efficiently managing server state with minimal code, reducing boilerplate significantlyMay 6, 2024

ArticleTIL: nuggets from ng-conf 2023July 22, 2023

ArticleWhere to initialize components selectors in Angular?September 16, 2020

ArticleNgRx Workshop: Part 6 - NgRx EntityApril 3, 2020

ArticleNgRx Workshop: Part 7 - Meta-ReducersApril 3, 2020

ArticleNgRx Workshop: Part 8 - Folder StructureApril 3, 2020

ArticleNgRx Workshop: Part 9 -Other linksApril 3, 2020

ArticleNgRx Workshop: Part 1- Introduction IntroductionOptimize NGRX Workshop: Apply SHARI principle, prevent over-engineering, and discover alternative state management solutionsApril 2, 2020

ArticleNgRx Workshop: Part 2 - ActionsApril 2, 2020

ArticleNgRx Workshop: Part 3 - ReducersApril 2, 2020

ArticleNgRx Workshop: Part 4 -SelectorsApril 2, 2020

ArticleNgRx Workshop: Part 5 - EffectsApril 2, 2020

ArticleAngular service to handle state using BehaviorSubjectMarch 27, 2020

05>Testing04 entries

Reliable tests for Angular apps — Jest, Cypress, and TDD.

ShowDesarrollo web dirigido por componentes, Storybook y CypressComponent-driven development con Storybook y Cypress (Angularidades, ep. 12).September 1, 2024

ArticleSetup Jest in Angular 18Guide to set up Jest for Angular 18 applications for faster, smoother testing. Steps to uninstall Karma/Jasmine and configure Jest includedAugust 23, 2024

ArticleTesting NgRx Effect using observer-spySeptember 25, 2020

ArticleAngular 11 - Setting up JestJuly 6, 2020

06>Angular12 entries

Patterns, performance, and DX across years of Angular work.

ShowEntrevistas para roles de Angular y el proceso de onboardingEntrevistas para roles de Angular y onboarding (Angularidades, ep. 3).March 1, 2024

ArticleStoryBook setup tips for your Angular applicationEnhance your Angular StoryBook with tips on documentation, theming, speed, and add-ons for a better development experienceFebruary 8, 2024

ArticleTaming HTTP Requests with an Abstract API ServiceAbstract API Service streamlines HTTP requests, offering ease, standardization, and versatility for various entities and API types. A universal manage...January 4, 2024

ArticleImprove loading times with the @defer block in AngularOptimize Angular app with `@defer` for deferred content, enhancing LCP and seamless data loading via idle, viewport, and interaction triggersDecember 7, 2023

ArticleView Transitions API in Angular 17Explore Angular 17's View Transitions API for seamless animations, better UX, and simple web app integration. Boost engagement with easeNovember 20, 2023

ArticleView Transitions API en Angular 17Aprende a crear animaciones suaves en Angular 17 con View Transitions API para mejorar experiencia de usuario y estética de tu aplicación webOctober 31, 2023

ArticlePrettifying HTML in AngularImprove Angular HTML readability using prettier-plugin-organize-attributes; sort attributes, boost code reviews, supports Vue, React, AngularSeptember 19, 2023

ArticleUsing Prettier in Angular HTMLEnhance Angular HTML with `prettier-plugin-organize-attributes` for ordered attributes, quicker navigation. Supports Vue, React, AngularSeptember 19, 2023

ArticleSlides from ng-conf Lollapalooza Lighting Talks 2023!June 14, 2023

LivestreamAngular Community Meetup en EspañolMeetup en español con Alfredo Perez, Rafael Mestre y Eduardo Roth.October 11, 2022

ShowGet to Know the 2022 ng-conf SpeakersSpeaker spotlight ahead of ng-conf 2022.April 1, 2022

ArticleNotes from Accessibility Workshop from Enterprise NG 2020November 23, 2020