메뉴
Implement frontend user interfaces with modern frameworks, responsive design, and accessibility standards
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Design RESTful APIs with proper resource modeling, error handling, pagination, and documentation
Design system architecture, data models, API contracts, and create Architecture Decision Records (ADRs)
Implement backend functionality including APIs, business logic, database operations, and integrations
Comprehensive code review checking for security, performance, maintainability, and best practices
Prepare deployment configuration, environment setup, health checks, and rollback procedures
Perform comprehensive security audits checking for OWASP Top 10 vulnerabilities and security best practices
| name | frontend |
| description | Implement frontend user interfaces with modern frameworks, responsive design, and accessibility standards |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
Build responsive, accessible, and performant user interfaces.
// Good component structure
function UserCard({ user, onEdit, onDelete }) {
const handleEdit = () => onEdit(user.id);
const handleDelete = () => onDelete(user.id);
return (
<article className="user-card" aria-label={`User: ${user.name}`}>
<header>
<h3>{user.name}</h3>
<span>{user.email}</span>
</header>
<footer>
<button onClick={handleEdit} aria-label="Edit user">
Edit
</button>
<button onClick={handleDelete} aria-label="Delete user">
Delete
</button>
</footer>
</article>
);
}
const [isOpen, setIsOpen] = useState(false);
const [formData, setFormData] = useState(initialData);
const sortedItems = useMemo(() =>
items.sort((a, b) => a.name.localeCompare(b.name)),
[items]
);
const { data, isLoading, error } = useQuery(['users'], fetchUsers);
/* Mobile first */
.container {
padding: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: 2rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
function LoginForm({ onSubmit }) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [errors, setErrors] = useState({});
const handleSubmit = (e) => {
e.preventDefault();
const validation = validate({ email, password });
if (!validation.valid) {
setErrors(validation.errors);
return;
}
onSubmit({ email, password });
};
return (
<form onSubmit={handleSubmit} noValidate>
<label htmlFor="email">Email</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
aria-invalid={!!errors.email}
aria-describedby={errors.email ? 'email-error' : undefined}
/>
{errors.email && <span id="email-error">{errors.email}</span>}
{/* ... password field ... */}
<button type="submit">Login</button>
</form>
);
}