diff --git a/.changeset/tasty-trees-begin.md b/.changeset/tasty-trees-begin.md
new file mode 100644
index 000000000000..6d25856505e6
--- /dev/null
+++ b/.changeset/tasty-trees-begin.md
@@ -0,0 +1,5 @@
+---
+'@modern-js/app-tools': patch
+---
+
+feat(app-tools): update preset type definitions
diff --git a/packages/solutions/app-tools/lib/types.d.ts b/packages/solutions/app-tools/lib/types.d.ts
index 9071cf53db16..ff1dd43705bf 100644
--- a/packages/solutions/app-tools/lib/types.d.ts
+++ b/packages/solutions/app-tools/lib/types.d.ts
@@ -11,6 +11,10 @@ declare namespace NodeJS {
   }
 }
 
+// reference @rsbuild/core/types, but there are some differences, such as svg
+/**
+ * Image assets
+ */
 declare module '*.bmp' {
   const src: string;
   export default src;
@@ -36,143 +40,152 @@ declare module '*.png' {
   export default src;
 }
 
-declare module '*.avif' {
+declare module '*.pjpeg' {
   const src: string;
   export default src;
 }
-
-declare module '*.ico' {
+declare module '*.pjp' {
   const src: string;
   export default src;
 }
-
-declare module '*.webp' {
+declare module '*.apng' {
   const src: string;
   export default src;
 }
-
-declare module '*.svg' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement>
-  >;
-
-  /**
-   * The default export type depends on the svgDefaultExport config,
-   * it can be a string or a ReactComponent
-   * */
-  const content: any;
-  export default content;
+declare module '*.tif' {
+  const src: string;
+  export default src;
 }
-
-declare module '*.svg?react' {
-  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-  export default ReactComponent;
+declare module '*.tiff' {
+  const src: string;
+  export default src;
 }
-
-declare module '*.bmp?inline' {
+declare module '*.jfif' {
   const src: string;
   export default src;
 }
 
-declare module '*.gif?inline' {
+declare module '*.avif' {
   const src: string;
   export default src;
 }
 
-declare module '*.jpg?inline' {
+declare module '*.ico' {
   const src: string;
   export default src;
 }
 
-declare module '*.jpeg?inline' {
+declare module '*.webp' {
   const src: string;
   export default src;
 }
 
-declare module '*.png?inline' {
+/**
+ * Font assets
+ */
+declare module '*.woff' {
   const src: string;
   export default src;
 }
-
-declare module '*.avif?inline' {
+declare module '*.woff2' {
   const src: string;
   export default src;
 }
-
-declare module '*.ico?inline' {
+declare module '*.eot' {
   const src: string;
   export default src;
 }
-
-declare module '*.webp?inline' {
+declare module '*.ttf' {
   const src: string;
   export default src;
 }
-
-declare module '*.svg?inline' {
-  import * as React from 'react';
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement>
-  >;
-
+declare module '*.otf' {
   const src: string;
   export default src;
 }
-
-declare module '*.bmp?url' {
+declare module '*.ttc' {
   const src: string;
   export default src;
 }
 
-declare module '*.gif?url' {
+/**
+ * Media assets
+ */
+declare module '*.mp4' {
   const src: string;
   export default src;
 }
-
-declare module '*.jpg?url' {
+declare module '*.webm' {
   const src: string;
   export default src;
 }
-
-declare module '*.jpeg?url' {
+declare module '*.ogg' {
   const src: string;
   export default src;
 }
-
-declare module '*.png?url' {
+declare module '*.mp3' {
   const src: string;
   export default src;
 }
-
-declare module '*.avif?url' {
+declare module '*.wav' {
   const src: string;
   export default src;
 }
-
-declare module '*.ico?url' {
+declare module '*.flac' {
   const src: string;
   export default src;
 }
-
-declare module '*.webp?url' {
+declare module '*.aac' {
+  const src: string;
+  export default src;
+}
+declare module '*.mov' {
+  const src: string;
+  export default src;
+}
+declare module '*.m4a' {
+  const src: string;
+  export default src;
+}
+declare module '*.opus' {
   const src: string;
   export default src;
 }
 
-declare module '*.svg?url' {
+declare module '*.svg' {
   import * as React from 'react';
 
   export const ReactComponent: React.FunctionComponent<
     React.SVGProps<SVGSVGElement>
   >;
 
+  /**
+   * The default export type depends on the svgDefaultExport config,
+   * it can be a string or a ReactComponent
+   * */
+  const content: any;
+  export default content;
+}
+
+declare module '*.svg?react' {
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}
+
+/**
+ * Queries
+ */
+declare module '*?inline' {
+  const content: string;
+  export default content;
+}
+
+declare module '*?url' {
   const src: string;
   export default src;
 }
 
+
 declare module '*.css' {
   const classes: { readonly [key: string]: string };
   export default classes;
@@ -193,6 +206,9 @@ declare module '*.sass' {
   export default classes;
 }
 
+/**
+ * CSS Modules
+ */
 declare module '*.module.css' {
   const classes: { readonly [key: string]: string };
   export default classes;
@@ -224,12 +240,17 @@ declare module '*.hbs' {
 }
 
 declare module '*.yaml' {
-  const src: string;
+  const src: Record<string, any>;
   export default src;
 }
 
+declare module '*.yml' {
+  const content: Record<string, any>;
+  export default content;
+}
+
 declare module '*.toml' {
-  const src: string;
+  const src: Record<string, any>;
   export default src;
 }