菜单
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>
);
}