Senior-level front-end and back-end development guidance for JavaScript, TypeScript, HTML, and CSS with modern UI/UX practices. Emphasizes step-by-step planning, DRY principles, accessibility, and Tailwind-first styling.
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.
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
**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:**
**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>
);
};
```
**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>
);
};
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/autopresto-full-stack-development/raw