--- name: anti-slop-frontend description: Anti-slop frontend framework for AI agents. Enforces better layout, typography, motion, and spacing to counter generic AI-generated boilerplate UIs. Use when building frontend, countering generic AI UIs, need distinctive visual design, image-to-code pipeline. domain: content tags: [frontend, design, ui, anti-slop, taste, typography, motion, image-to-code] --- ## Overview Anti-slop frontend design framework based on [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill). Provides 13 specialized skills that enforce distinctive, production-grade visual design — countering the generic, soulless UIs that AI agents typically generate. The framework covers layout systems, typography hierarchies, motion design, spacing discipline, and image-to-code pipelines across three visual style variants. ## Implementation Skills - Configure agents, anti, better, boilerplate, building settings before first use - Review output quality and adjust parameters - Monitor performance metrics during execution - Document custom configurations for team reference - Schedule regular runs for consistent results ### taste-skill (v2) Core design taste engine. Injects layout/typography/color/motion constraints into agent output to prevent generic patterns. - **When to use**: Every frontend generation task as a baseline quality filter. - **Key principles**: White space is intentional, type scales are non-negotiable, color palettes have hierarchy, motion serves purpose. ### taste-skill-v1 Legacy taste skill for backward compatibility with existing agent pipelines. ### gpt-taste GPT-specific taste calibration — adapts design constraints for GPT-based code generators. ### image-to-code Screenshot-to-production-code pipeline. Takes a reference image and generates pixel-accurate frontend code. - **When to use**: Converting mockups, competitor screenshots, or design references into working code. - **Process**: Image analysis → layout extraction → component mapping → responsive code generation. ### redesign-existing-projects Audit and redesign existing frontend projects. Identifies anti-patterns and applies taste-skill improvements. - **When to use**: Inheriting ugly codebases, post-MVP polish, design debt cleanup. - **Process**: Visual audit → priority matrix → incremental redesign → before/after validation. ### high-end-visual-design Premium visual design patterns — luxury brand aesthetics, editorial layouts, cinematic compositions. - **When to use**: High-end brand sites, portfolio showcases, product launch pages. ### full-output-enforcement Ensures agents produce complete, production-ready output — no placeholder content, no stub components, no TODO comments. ### minimalist-ui Minimalist design system — reduction to essentials, generous whitespace, restrained color palettes. - **Key principles**: Remove until it breaks, then stop. Every element must earn its place. ### industrial-brutalist-ui Industrial brutalist design system — raw typography, exposed structure, intentional roughness, anti-polish aesthetics. - **Key principles**: Honesty in materials, function over decoration, embrace the grid. ### stitch-design-taste Design taste layer for Stitch-based component generation — ensures consistent quality across stitched UI components. ## Image Generation Skills - Configure agents, anti, better, boilerplate, building settings before first use - Review output quality and adjust parameters - Monitor performance metrics during execution - Document custom configurations for team reference - Schedule regular runs for consistent results ### imagegen-frontend-web Generate web-specific visual assets — hero images, section backgrounds, illustration sets — with consistent style matching the frontend design system. ### imagegen-frontend-mobile Generate mobile-specific visual assets — splash screens, onboarding illustrations, app store screenshots. ### brandkit Generate cohesive brand identity kits — logo variants, color palettes, typography pairings, icon sets, pattern libraries. ## Visual Style Variants - Configure agents, anti, better, boilerplate, building settings before first use - Review output quality and adjust parameters - Monitor performance metrics during execution - Document custom configurations for team reference - Schedule regular runs for consistent results ### Soft/Premium - Rounded corners, subtle gradients, soft shadows - Warm neutral palettes with accent pops - Smooth easing curves on transitions - High whitespace ratio, generous padding ### Minimalist - Sharp edges or very subtle radius - Monochrome + single accent color - Immediate transitions (100-200ms) - Grid-disciplined, content-first layouts ### Industrial Brutalist - No border radius, raw edges - High contrast black/white with one bold accent - No animation or hard cuts - Exposed grid lines, visible structure ## Installation ```bash npx skills add Leonxlnx/taste-skill ``` ## When to Use - Building any frontend UI from scratch - Countering generic AI-generated boilerplate designs - Need distinctive, production-grade visual design - Running an image-to-code conversion pipeline - Redesigning existing projects with poor visual quality - Generating brand-consistent visual assets ## How to Use 1. Define content goal (traffic, engagement, conversion, brand awareness) 2. Research target audience pain points and search intent 3. Generate content using appropriate AI tools 4. Edit and humanize output for authenticity 5. Optimize for target platform (SEO, hashtags, format) 6. Schedule and distribute across channels 7. Measure performance and iterate ## When NOT to Use - Task is about content strategy, not creation (use strategy skills) - Task is about content distribution (use distribution skills) - You need to analyze content performance (use analytics skills) - Task is about content moderation (use moderation tools) - You don't have content guidelines - Task requires domain expertise (consult experts) ## Red Flags - **AI-generated content sounds robotic**: Always run through humanizer before publishing - **Engagement dropping week-over-week**: Content fatigue or algorithm change — vary formats - **Duplicate content across platforms**: Adapt content per platform, don't just cross-post - **No content calendar**: Sporadic posting kills audience retention - **Ignoring analytics**: Content without measurement is just publishing, not marketing