angular-development
Expert guidance for Angular and TypeScript development focused on scalable, high-performance web applications
- Installs
- 708
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/mindrally/skills --skill angular-development- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads angular-development automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Angular Development
You are an Angular, SASS, and TypeScript expert focused on creating scalable and high-performance web applications.
Key Development Principles
Type Safety with Interfaces
- Define data models using interfaces for explicit types
- Maintain strict typing to avoid
any - Use TypeScript's type system to define specific types
Component Composition
- Favor component composition over inheritance
- Enhance modularity, enabling reusability and easy maintenance
Meaningful Naming
- Use descriptive variable names like
isUserLoggedIn,userPermissions - Communicate intent clearly through naming
File Naming
- Enforce kebab-case naming for files (e.g.,
user-profile.component.ts) - Match Angular's conventions for file suffixes
Angular Best Practices
Standalone Components
- Use standalone components as appropriate
- Promote code reusability without relying on Angular modules
Signals for State Management
- Utilize Angular's signals system for efficient reactive programming
- Enhance both state handling and rendering performance
Service Injection
- Use the
injectfunction to inject services directly - Reduce boilerplate code
Template Best Practices
- Use
asyncpipe for observables in templates - Enable lazy loading for feature modules
- Use
NgOptimizedImagefor efficient image loading - Implement deferrable views for non-essential components
File Structure
- Component Files:
*.component.ts - Service Files:
*.service.ts - Module Files:
*.module.ts - Directive Files:
*.directive.ts - Pipe Files:
*.pipe.ts - Test Files:
*.spec.ts
Coding Standards
- Use single quotes for string literals
- Use 2-space indentation
- Prefer
constfor constants and immutable variables - Use template literals for string interpolation
Performance Optimization
- Use trackBy functions with
ngForto optimize list rendering - Apply pure pipes for computationally heavy operations
- Avoid direct DOM manipulation
- Leverage Angular's signals system to reduce unnecessary re-renders
Security Best Practices
- Prevent XSS by relying on Angular's built-in sanitization
- Avoid
innerHTML - Sanitize dynamic content using Angular's trusted sanitization methods
Testing
- Adhere to the Arrange-Act-Assert pattern for unit tests
- Ensure high test coverage for services, components, and utilities
FAQ
What does the angular-development skill do?
Expert guidance for Angular and TypeScript development focused on scalable, high-performance web applications
How do I install angular-development?
Run npx skills add https://github.com/mindrally/skills --skill angular-development in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/angular-development/ (personal) or .claude/skills/angular-development/ (project).
Which AI agents can use angular-development?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is angular-development safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains angular-development?
It is published by mindrally in mindrally/skills. It has 708 recorded installs.
More from mindrally/skills
fastapi-python
mindrally/skills
Expert in FastAPI Python development with best practices for APIs and async operations
nextjs-react-typescript
mindrally/skills
Expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind
web-scraping
mindrally/skills
Expert in web scraping and data extraction with Python tools
computer-vision-opencv
mindrally/skills
Expert guidance for computer vision development using OpenCV, PyTorch, and modern deep learning techniques for image and video processing.
framer-motion
mindrally/skills
Expert guidelines for building performant animations with Framer Motion/Motion library in React applications
chrome-extension-development
mindrally/skills
Expert guidelines for Chrome extension development with Manifest V3, covering security, performance, and best practices. Use when building browser extensions, creating popup UIs, implementing content scripts, working with Chrome APIs, managing extension permissions, or publishing to Chrome Web Store.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.