Anti Pattern

Anti-Pattern Skill — Ship Real Code, Not Decorations

This skill detects and prevents the most common anti-patterns that make software look unfinished or unprofessional.

Banned Anti-Patterns (ZERO TOLERANCE)

UI/UX Anti-Patterns

❌ BANNED:
- "Coming Soon" sections or labels
- Non-functional buttons (must work or be removed)
- Forms that don't submit anywhere
- Hardcoded fake data in production components
- Static tables pretending to be dynamic
- Links that go nowhere (href="#")
- "Under Construction" banners
- Feature flags permanently set to false
- Disabled inputs without clear explanation
- Empty states without helpful messaging
- Pagination that doesn't actually paginate
- Search bars that don't actually search
- Filters that return the same results
- SINGLE LANDING PAGE when user asks for "a website" (MUST be multi-page)
- No color palette defined before writing CSS
- Random hex colors without a documented design system
- Inconsistent colors across pages (different blues, different spacing)
- EMOJIS anywhere in the website (use SVG icons from Lucide/Heroicons/Phosphor)
- Sections touching each other (no spacing between content blocks)
- Footer stuck directly to the section above (no breathing room)
- Navigation with more than 7 top-level items (cluttered, overwhelming)
- Service pages without individual detail pages (/services only, no /services/web-design)
- Product pages without individual detail pages (/products only, no /products/[slug])
- Generic service descriptions (2-3 lines per service is NOT enough)

✅ REQUIRED:
- Every visible button triggers a real handler or is removed
- Every form has a real onSubmit connected to an API call
- Every list loads from a real data source with loading states
- Every link navigates to a real destination
- Empty states explain why and suggest next actions
- Error states show real error messages from the server
- Loading states appear during real async operations
- Multi-page website with separate routes (Home, About, Services, Contact, Products)
- Professional 6-color palette (--color-primary, secondary, accent, bg, surface, text)
- Consistent design system across ALL pages
- ZERO emojis — use SVG icons (Lucide, Heroicons, Phosphor)
- Section spacing: minimum 80px padding between sections
- Footer: minimum 128px top padding (never touching content above)
- Navigation: max 7 items, dropdowns for groups, secondary links in footer
- Services: listing page + individual detail pages per service
- Products: listing page + individual detail pages per product
- Each service detail: description, process, deliverables, pricing, FAQ, CTA
- Each product detail: gallery, specs, pricing, reviews, related products

Website Architecture Anti-Patterns

❌ BANNED (when user says "build a website"):
- Creating index.html as the ONLY file
- Putting all content in one scrollable page
- Using anchor links (#about, #services) instead of separate pages
- Calling it a "website" when it's just a landing page
- No navigation menu between sections/pages
- No shared header/footer across pages
- No unique meta title/description per page

✅ REQUIRED:
- Separate route/page for each section (e.g., /about, /services, /contact)
- Navigation menu linking all pages
- Shared header + footer components
- Each page has unique  and 
- Consistent color palette and typography across ALL pages
- Minimum 5 pages for any "website" request (Home, About, Services, Products/Portfolio, Contact)

Code Anti-Patterns

❌ BANNED:
- return []; // TODO: implement
- throw new Error('Not implemented');
- // placeholder
- Hardcoded arrays pretending to be API responses
- Functions with empty bodies
- Catch blocks that silently swallow errors
- Commented-out code in production
- Magic numbers without named constants
- Copy-pasted code (DRY violation)
- God functions (>100 lines)
- Deeply nested callbacks (>3 levels)
- N+1 database queries in loops

✅ REQUIRED:
- Every function has real, working implementation
- Every error is properly handled with user feedback
- Constants are named and documented
- Code is DRY — extract shared logic
- Functions are focused and under 40 lines

N+1 Query Detection

❌ BANNED (N+1):
// This fires 1 query per user = N+1 problem
for (const user of users) {
  const orders = await db.query('SELECT * FROM orders WHERE user_id = ?', [user.id]);
}

✅ REQUIRED (Batch):
// This fires 1 query total
const userIds = users.map(u => u.id);
const orders = await db.query(
  'SELECT * FROM orders WHERE user_id IN (?)',
  [userIds]
);
// Then group in memory
const ordersByUser = groupBy(orders, 'user_id');

SQL Anti-Patterns

❌ BANNED:
SELECT * FROM users                    -- No SELECT *
WHERE name LIKE '%" + input + "%'     -- SQL injection
ORDER BY RAND()                        -- Performance killer
HAVING COUNT(*) > 0                    -- Use WHERE instead
WHERE YEAR(created_at) = 2024          -- Breaks index usage

✅ REQUIRED:
SELECT id, name, email FROM users      -- Explicit columns
WHERE name LIKE ?                      -- Parameterized
ORDER BY id DESC LIMIT 20              -- Deterministic sort
WHERE created_at >= '2024-01-01'       -- Index-friendly
  AND created_at ` and ``
- [ ] No page without Open Graph tags (og:title, og:description, og:image)
- [ ] No page without JSON-LD structured data (``)
- [ ] No non-home page without BreadcrumbList schema
- [ ] No duplicate JSON-LD blocks (use `@id` references instead)
- [ ] No missing `robots.txt` or `sitemap.xml`
- [ ] No images without `alt` text
- [ ] no page without canonical URL
- [ ] No missing `` attribute
- [ ] No page with more than one ``

## When NOT to Use

**Do NOT use this skill when:**

- Performing general code quality reviews (use code-review skill for broader analysis)
- Designing database schemas (use database-design skill for schema planning)
- Writing application business logic (use domain-driven skill for complete modules)
- Reviewing API endpoint implementations (use api-design skill for endpoint patterns)
- Performing security audits (use security-auditor skill for vulnerability analysis)
- Analyzing deployment configurations (use deployment skill for CI/CD pipelines)
- Reviewing git workflows or version control (use git-workflow skill for branching/commits)
- Writing SQL queries (use sql-best-practices skill for query optimization)
- **Designing multi-page website layouts** (use design-system skill for professional UI/UX)
- **Reviewing existing code for refactoring needs** (use refactoring skill for safe transformations)

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Omar-Obando](https://github.com/Omar-Obando)
- **Source:** [Omar-Obando/qwen-orchestrator](https://github.com/Omar-Obando/qwen-orchestrator)
- **License:** MIT
- **Homepage:** https://qwen.ai/qwencode

Install and usage instructions live in the source repository linked above.