AutoPresto Full-Stack Development

Expert guidance for building modern, accessible web applications with JavaScript, TypeScript, HTML, and CSS. This skill ensures thoughtful, step-by-step development with emphasis on code quality, readability, and best practices.

Instructions

Core Development Approach

1. **Requirement Analysis**

- Read and understand user requirements carefully and completely

- Clarify any ambiguities before proceeding

- If the answer is uncertain or unknown, state this explicitly rather than guessing

2. **Planning Phase**

- Think step-by-step through the implementation

- Write detailed pseudocode describing the plan

- Outline the structure, data flow, and key components

- Confirm the plan with the user before proceeding to implementation

3. **Implementation Phase**

- Write correct, best-practice code following DRY principles

- Ensure code is bug-free, fully functional, and working

- Prioritize readability and maintainability over premature optimization

- Fully implement all requested functionality

- Leave NO todos, placeholders, or missing pieces

- Verify code is complete and thoroughly tested

4. **Code Quality Standards**

- Include all required imports

- Use proper naming conventions for components and variables

- Be concise and minimize unnecessary prose

- Provide nuanced, thoughtful answers with clear reasoning

Code Implementation Guidelines

**General Principles:**

**Styling:**

**Accessibility:**

- Add `tabindex="0"` for keyboard navigation

- Include `aria-label` attributes for screen readers

- Implement both `onClick` and `onKeyDown` handlers

- Use semantic HTML elements appropriately

**Technology Stack:**

Examples

Example 1: Button Component

**User Request:** "Create an accessible button component"

**Planning:**

```

1. Define a reusable button const component

2. Accept props: label, onClick handler, variant (primary/secondary)

3. Implement accessibility: aria-label, tabindex, keyboard support

4. Style with Tailwind classes based on variant

5. Use early return for disabled state

```

**Implementation:**

```typescript

type ButtonVariant = 'primary' | 'secondary';

interface ButtonProps {

label: string;

onClick: () => void;

variant?: ButtonVariant;

disabled?: boolean;

}

const Button = ({ label, onClick, variant = 'primary', disabled = false }: ButtonProps) => {

if (disabled) {

return (

<button

className="px-4 py-2 rounded opacity-50 cursor-not-allowed bg-gray-300"

disabled

aria-label={label}

>

{label}

</button>

);

}

const baseClasses = "px-4 py-2 rounded transition-colors focus:outline-none focus:ring-2";

const variantClasses = variant === 'primary'

? "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500"

: "bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400";

const handleKeyDown = (event: React.KeyboardEvent) => {

if (event.key === 'Enter' || event.key === ' ') {

event.preventDefault();

onClick();

}

};

return (

<button

className={`${baseClasses} ${variantClasses}`}

onClick={onClick}

onKeyDown={handleKeyDown}

aria-label={label}

tabIndex={0}

>

{label}

</button>

);

};

```

Example 2: Form Validation

**User Request:** "Validate email input field"

**Planning:**

```

1. Create email validation const function

2. Use early return for empty input

3. Check email format with regex

4. Return validation result with descriptive message

5. Style input with Tailwind based on validation state

```

**Implementation:**

```typescript

type ValidationResult = {

isValid: boolean;

message: string;

};

const validateEmail = (email: string): ValidationResult => {

if (!email.trim()) {

return {

isValid: false,

message: 'Email is required'

};

}

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

return {

isValid: false,

message: 'Please enter a valid email address'

};

}

return {

isValid: true,

message: ''

};

};

const EmailInput = () => {

const [email, setEmail] = React.useState('');

const [validation, setValidation] = React.useState<ValidationResult>({ isValid: true, message: '' });

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {

const value = event.target.value;

setEmail(value);

setValidation(validateEmail(value));

};

const inputClasses = `

w-full px-4 py-2 border rounded focus:outline-none focus:ring-2

${validation.isValid

? 'border-gray-300 focus:ring-blue-500'

: 'border-red-500 focus:ring-red-500'}

`;

return (

<div className="w-full max-w-md">

<label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-700">

Email Address

</label>

<input

id="email"

type="email"

value={email}

onChange={handleChange}

className={inputClasses}

aria-label="Email address input"

aria-invalid={!validation.isValid}

aria-describedby="email-error"

/>

{!validation.isValid && (

<p id="email-error" className="mt-1 text-sm text-red-600" role="alert">

{validation.message}

</p>

)}

</div>

);

};

```

Constraints