Cheat Codes for better design and code

Act as a senior product designer and design systems engineer.

Create a design system for [product] with:
- A clear visual concept and 3 design principles
- Color tokens with accessible contrast
- Type scale, spacing scale, radius, and shadow tokens
- Button, input, card, modal, navigation, and empty-state patterns
- Responsive behavior for mobile, tablet, and desktop

Return the system as implementation-ready CSS variables and component guidance.
Keep the interface polished, cohesive, and easy to extend.

Design a responsive landing page for [product] aimed at [audience].

Include:
1. A specific hero headline and supporting value proposition
2. One primary call to action and one low-friction secondary action
3. Social proof, benefits, product workflow, FAQ, and final CTA
4. Mobile-first layout, accessible headings, and visible focus states

Use [framework] and [styling system]. Avoid generic gradients and filler copy.
Explain the layout hierarchy before writing the code.

Create an analytics dashboard for [user role] tracking [metrics].

The dashboard must:
- Surface the 3 most important decisions at the top
- Use cards only when they improve scanning
- Include loading, empty, error, and no-permission states
- Support keyboard navigation and readable color contrast
- Adapt the table and charts for narrow screens

Use realistic sample data and explain why each visualization fits its metric.
Build the UI with [React/Tailwind/etc.] and keep components reusable.

Build a production-ready [form name] in React and TypeScript.

Requirements:
- Use labels connected to every field
- Validate with [Zod/your validation library]
- Show inline errors without relying on color alone
- Preserve entered values after validation errors
- Disable submit while saving and prevent duplicate submissions
- Announce success and server errors accessibly
- Include loading, empty, and network-failure behavior

Match the existing component patterns in [reference file] and add focused tests.

Refactor this card component for responsive behavior.

Goals:
- Preserve the information hierarchy at every width
- Keep the primary action visible without awkward wrapping
- Use a stacked layout below [breakpoint]
- Handle long titles, missing images, and empty metadata
- Keep touch targets at least 44px
- Match the existing spacing, typography, and interaction patterns

First explain the layout changes, then update only the necessary component files.

Investigate this bug systematically.

Expected behavior: [describe it]
Actual behavior: [describe it]
Exact error or logs:
[paste logs]
Relevant code:
[paste the smallest useful section]

Do not rewrite the feature. First:
1. List the likely causes in order
2. State what evidence would confirm each cause
3. Identify the smallest safe fix
4. Suggest a regression test and verification command

Review this change as a security-focused senior engineer.

Check for:
- Authentication and authorization gaps
- Injection, XSS, CSRF, and unsafe redirects
- Secrets or personal data exposed in logs or responses
- Missing server-side validation and rate limits
- Insecure file uploads, dependencies, or error messages
- Race conditions and unsafe assumptions at trust boundaries

For every finding, include severity, evidence, exploit scenario, and a minimal fix.
If something is safe, explain what control makes it safe.

Add a [HTTP method] endpoint for [resource] to this [framework] API.

Context:
- Authentication: [method]
- Database: [database/ORM]
- Existing route pattern: [file or example]
- Response format: [shape]

Include:
- Request schema validation
- Authorization checks
- Explicit success and error responses
- Database failure handling
- Types shared between client and server where appropriate
- A test for success, invalid input, unauthorized access, and missing data

Follow existing project conventions and do not introduce a new library.

Design the database model for [feature].

Users need to [user workflows]. Identify:
- Entities, fields, types, defaults, and constraints
- Relationships and delete behavior
- Indexes for the expected queries
- Uniqueness and ownership rules
- Audit fields and privacy-sensitive data

Return:
1. A concise data model
2. The migration/schema code for [ORM]
3. Example queries for the main reads and writes
4. Risks, tradeoffs, and a rollback plan

Optimize [page] for people searching for [topic].

Create:
- One clear title and meta description
- A specific H1 and logical H2 structure
- Helpful introductory copy that answers the user's intent
- Internal-link suggestions
- FAQ questions worth answering
- Open Graph and social preview copy

Keep the writing natural, accurate, and useful. Do not make unsupported claims
or repeat keywords unnaturally.

Audit this feature for performance bottlenecks.

Context: [page, user flow, traffic, and device constraints]
Code or profiling data:
[paste evidence]

Separate findings into:
- User-visible issues
- Network and data-loading costs
- Rendering and bundle costs
- Database or server costs

Rank each by impact and effort. Recommend the smallest high-impact changes,
include a measurement plan, and avoid optimizing code without evidence.

Create a test plan for [feature] from these requirements:

[paste requirements or acceptance criteria]

Cover:
- The main happy path
- Validation and boundary values
- Loading, empty, error, and retry states
- Authentication and permission differences
- Keyboard and responsive behavior
- Regression risks from existing functionality

Return a prioritized list of tests with setup, action, and expected result.
Use the project's existing test framework and patterns.