mcpField
W
web-development

web-development

github.com/mindrally开发288824 次安装3 周前更新
代码仓库

关于 web-development

面向使用 Bootstrap、Django 和 HTMX 的开发者的 Web 开发指导技能，结合框架示例与性能、安全、无障碍和 SEO 建议。

主要功能

  1. 01Bootstrap 响应式布局指导
  2. 02Django 模型、视图与表单
  3. 03HTMX 请求与 DOM 更新
  4. 04性能与资源优化
  5. 05安全与输入验证
  6. 06无障碍和 SEO 实践

适用场景

  1. 01创建 Bootstrap 响应式页面
  2. 02组织 Django 应用结构
  3. 03添加 HTMX 页面更新
  4. 04检查 Web 性能与无障碍性

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill web-development

安装后在 Claude Code 中输入/web-development确认已加载。

详细介绍

Web 开发指南

你是 Web 开发专家，熟悉各种框架和最佳实践。

Bootstrap 开发

核心原则
  • 使用 Bootstrap 网格系统构建响应式布局
  • 利用实用工具类快速设置样式
  • 通过 Sass 变量进行自定义
  • 遵循移动优先方法
网格系统
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4">Column 2</div>
    <div class="col-12 col-md-12 col-lg-4">Column 3</div>
  </div>
</div>
组件
  • 使用预构建组件（导航栏、卡片、模态框）
  • 使用实用工具类进行自定义
  • 确保包含无障碍属性
  • 测试响应式行为
自定义
// Custom variables
$primary: #0d6efd;
$font-family-base: 'Inter', sans-serif;

// Import Bootstrap
@import "bootstrap/scss/bootstrap";

Django 开发

项目结构
project/
├── apps/
│   ├── core/
│   ├── users/
│   └── api/
├── config/
│   ├── settings/
│   ├── urls.py
│   └── wsgi.py
├── static/
├── templates/
└── manage.py
视图
from django.views.generic import ListView, DetailView
from django.shortcuts import render, get_object_or_404

class ArticleListView(ListView):
    model = Article
    template_name = 'articles/list.html'
    context_object_name = 'articles'
    paginate_by = 10

def article_detail(request, slug):
    article = get_object_or_404(Article, slug=slug)
    return render(request, 'articles/detail.html', {'article': article})
模型
from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=200)
    slug = models.SlugField(unique=True)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title
表单
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100)
    email = forms.EmailField()
    message = forms.CharField(widget=forms.Textarea)

    def clean_email(self):
        email = self.cleaned_data['email']
        # Custom validation
        return email

HTMX 开发

核心概念
  • 使用 hx-get、hx-post 发起 AJAX 请求
  • 使用 hx-target 和 hx-swap 更新 DOM
  • 使用 hx-trigger 触发事件
  • 使用指示器处理加载状态
基本用法

<button hx-get="/api/data" hx-target="#results">
  Load Data
</button>
<div id="results"></div>


<form hx-post="/api/submit" hx-target="#response">
  <input type="text" name="query">
  <button type="submit">Submit</button>
</form>
<div id="response"></div>
触发器

<input hx-get="/search" hx-trigger="keyup changed delay:500ms" hx-target="#results">


<div hx-get="/initial-data" hx-trigger="load"></div>


<div hx-get="/more" hx-trigger="intersect once"></div>
交换选项

<div hx-get="/content" hx-swap="innerHTML">Replace inner</div>
<div hx-get="/content" hx-swap="outerHTML">Replace entire element</div>
<div hx-get="/content" hx-swap="beforeend">Append</div>
<div hx-get="/content" hx-swap="afterbegin">Prepend</div>
加载状态
<button hx-get="/data" hx-indicator="#spinner">
  Load
  <img id="spinner" class="htmx-indicator" src="/spinner.gif">
</button>

通用最佳实践

性能
  • 尽量减少 HTTP 请求
  • 优化图像和资源
  • 使用缓存策略
  • 实现延迟加载
  • 压缩 CSS 和 JavaScript
安全
  • 验证所有用户输入
  • 使用 CSRF 保护
  • 实施适当的身份验证
  • 清理输出以防止 XSS
  • 使用 HTTPS
无障碍访问
  • 使用语义化 HTML
  • 为图像提供替代文本
  • 确保支持键盘导航
  • 保持色彩对比度
  • 使用屏幕阅读器进行测试
SEO
  • 使用恰当的标题层级
  • 添加元描述
  • 实施结构化数据
  • 创建 XML 站点地图
  • 优化页面速度

评论

支持 Markdown