Packs

2 packs

Architecture Documentation with Diagrams

Install this pack to analyze a codebase and produce architectural docs with diagrams, technology stack blueprints, and folder structure blueprints.

9 skills · pack

@alirezarezvani

Engineering Team

32 engineering skills: architecture, frontend, backend, fullstack, QA, DevOps, security, AI/ML, data engineering, Playwright (9 sub-skills), self-improving agent, Stripe integration, TDD guide, tech stack evaluator, Google Workspace CLI, a11y audit (WCAG 2.2), Azure cloud architect, GCP cloud architect, security pen testing, Snowflake development, adversarial-reviewer, ai-security, cloud-security,

16 skills · pack

Results for “tech-stack”

5 skills

Generates opinionated design systems with curated color palettes, font pairings, UI styles, product-type rules, and UX guidelines across multiple tech stacks.

Generate technical architecture diagrams, pipeline flows, layer/stack diagrams, and system illustrations as standalone HTML files. Uses a dark-mode design system with embedded CSS and inline SVG. Use when the user needs architecture diagrams, system illustrations, flow charts, or technical visualizations.

More results

Scans a codebase to extract design tokens, typography, colors, spacing, and brand patterns, then writes a Design Context section to CLAUDE.md without asking questions.

nextlevelbuilder

Provides a searchable database of UI/UX design rules with priority-based recommendations across 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presets, and 25 chart types for 22 technology stacks.

Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.